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部分代码

    

        

            
姓名
            
性别
            
年龄