Web 基础30 JQuery_AJAX入门及其案例

jQuery的AJAX实现

其实坦白的说就是我也比清除底层是什么样子的，但是就是$.ajax就是AJAX的封装，更简单是使用，这里我就直接讲解一下使用步骤哈哈哈。

先说一下语法

$,jQuery
- ajax()
  - 参数

            {
                type:设置请求的类型，常用的有GET和POST
                url:设置请求的地址
                data:设置POST方式提交的数据
                success:请求响应完成后要执行的方法
                
            }

JS中的{}对象
- {}代表一个对象
  - 属性：
    - {属性名称:属性值,属性名称2:属性值2}
    - var stu = {name:"zhangsan",age:18}
    - stu.name
  - 方法:
    - {方法名:function(){}}
    - var stu = {sum:function(a,b){return a + b;}}
    - stu.sum()
不管是原生的还是jQuery的AJAX,需要设置5个部分
- type:请求方式
- url:请求路径
- data:请求参数
- success:回调函数
- 对于post请求,设置一个Content-Type ---jQuery已经帮我们实现了

ajax的请求方式

get请求

$.ajax({
    type:"GET",
    url:"/myJQueryAJAX/JQueryAJAXServlet?username=zhangsan",
    success:function(msg) {
        //alert(msg);
        $("#div01").html(msg);
    }       
});

post请求

$.ajax({
    type:"POST",
    url:"/myJQueryAJAX/JQueryAJAXServlet",
    data:"username=zhangsan",
    success:function(msg) {
        $("#div01").html(msg + "post");
    }
    
});

jQuery的其他AJAX方法

get
- 两个参数
  - url:设置请求的地址
  - fn:设置请求响应完成后要执行的方法
- 三个参数
  - url:设置请求的地址
  - data:设置向服务器提交的数据
    - "username=zhangsan&password=123"
    - {username:"zhangsan",password:"123"}
  - fn:设置请求响应完成后要执行的方法
post
- 三个参数
  - url:设置请求的地址
  - data:设置向服务器提交的数据
    - "username=zhangsan&password=123"
    - {username:"zhangsan",password:"123"}
  - fn:设置请求响应完成后要执行的方法
load
- 一个参数
  - url
- 两个参数
  - url
  - data
注意:
- load方法是由标签来调用,他可以直接把服务器传过来的数据塞到调用它的这个jQuery对象里面(标签)
- load方法会根据参数的不同,选择不同的提交方式,只有第二个参数是js对象,才会用post方法
- 实际开发中 get和post
  - 如果你仅仅是想得到一些数据,用get就可以某一页商品的信息传一个页码
  - 像表单登录,验证,重要程度比较高的,用post请求,相对的安全!

案例异步加载所有学生信息我这里就提供jsp部分代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
    //展示所有学生信息
    function findAll() {
        $.ajax({
            type:"GET",
            url:"/myJQueryAJAX/StudentServlet",
            success:function(msg) {
                //$("table").html($("table").html() + msg);
                $("table").append(msg);
            }
        
            
        });
    }
    
    $(function() {
        findAll();
    });
    
</script>
</head>
<body>
    <table border="1" width="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        
    </table>
</body>
</html>

Web 基础30 JQuery_AJAX入门及其案例

jQuery的AJAX实现

先说一下语法

ajax的请求方式

jQuery的其他AJAX方法

案例异步加载所有学生信息 我这里就提供jsp部分代码

推荐阅读更多精彩内容

案例异步加载所有学生信息我这里就提供jsp部分代码