jquery ajax教程

JQuery ajax

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。

$.ajax({
    url: "test.html",  //ajax请求地址
    cache: false,//(默认: true,dataType为script和jsonp时默认为false)设置为 false 将不缓存此页面，建议使用默认
    type:"GET",//请求方式 "POST" 或 "GET"， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
    dataType:"json",    //根据返回数据类型可以有这些类型可选：xml html script json jsonp text
    //发送到服务器的数据，可以直接传对象{a:0,b:1}，如果是get请求会自动拼接到url后面，如：&a=0&b=1
    //如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
    data:{},
    //发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
    beforeSend:function(xhr){
        //this 默认为调用本次AJAX请求时传递的options参数
    },
    //context这个对象用于设置ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。
    //比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。
    context: document.body,
    //请求成功后的回调函数
    success: function(data,textStatus){
        //this 调用本次AJAX请求时传递的options参数 ,如果设置context来改变了this，那这里的this就是改变过的
    },
    //请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
    //如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
    error：function(XMLHttpRequest, textStatus, errorThrown){
        // 通常 textStatus 和 errorThrown 之中
        // 只有一个会包含信息
        // this 调用本次AJAX请求时传递的options参数
    },
    //请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串
    complete:function(XMLHttpRequest, textStatus) {
        //this 调用本次AJAX请求时传递的options参数
    },
    //一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：
    statusCode:{
        404:function(){
            alert('404，页面不存在');
        }
    }
});

post使用

$.ajax({
    type: "POST",
    url: "page.php",
    dataType:'json',//返回类型为json
    data: {name:"张三",sex:1},//等价于"name=张三&sex=1"，url后的参数
    success: function(data){
        //实际操作的时候，返回的json对象中可能会有成功错误的判断标记，所以可能也需要判断一下
        console.log("返回的数据: " + data );
    }
});

jquery ajax发送一个get请求

//$.get("请求url","发送的数据对象","成功回调","返回数据类型");
$.get("test.cgi",{ name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

jquery ajax发送一个POST请求

//$.post("请求url","发送的数据对象","成功回调","返回数据类型");
$.post("test.cgi",{ name: "John", time: "2pm" },
   function(data){
      alert("Data Loaded: " + data);
},'json');

jquery ajax经常用到的一个工具函数

序列化表单值的作用是将表单中的值拼装成字符串形式的key-value键值对提交给后台服务器程序解析，来获取用户的输入值

//完整实例如：（表单html结构不在写）
    $("form").on("submit",function(){
        var url = this.action;   //可以直接取到表单的action
        var formData = $(this).serialize();
        $.post(url,formData,
            function(data){
                //返回成功，可以做一个其他事情
                console.log(data);
            },'json');

        //阻止表单默认提交行为
        return false
    })