jquery ajax实例教程和一些高级用法

朱雀 2021-06-26 16:06 385阅读 0赞

`jquery ajax`的调用方式：`jquery.ajax(url,[settings])`，`jquery ajax`常用参数：红色标记参数几乎每个`ajax`请求都会用到这几个参数，本文将介绍更多`jquery ajax`实例，后面会有一些`ajax`高级用法

`jquery ajax`的调用方式：`jquery.ajax(url,[settings])`，因为实际使用过程中经常配置的并不多，所以这里并没有列出所有参数，甚至部分参数默认值，就是最佳实践，根本没必要去自己定义，除非有特殊需求，如果需要所有参数，可以查看`jquery api`

## `jquery ajax`常用参数： ##

$.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，页面不存在');
            }
        }
    });

## `jquery ajax`发送一个`get`请求，数据返回为`json` ##

实战中最常用到的`ajax`方式获取数据，一般用`get`方式

$.ajax({ 
        type: "GET",
        url: "page.php",
        dataType:'json',
        data: { id:1001},//也可以是字符串链接"id=1001"，建议用对象
        success: function(data){ 
            console.log("返回的数据: " + data );
        }
    });

## `jquery ajax`发送一个`post`请求，数据返回为`json` ##

实战中最常用到的`ajax`方式提交数据，提交一般用`post`方式

$.ajax({ 
        type: "POST",
        url: "page.php",
        dataType:'json',
        data: { name:"张三",sex:1},//也可以是字符串链接"name=张三&sex=1"，建议用对象
        success: function(data){ 
            //实际操作的时候，返回的json对象中可能会有成功错误的判断标记，所以可能也需要判断一下
            console.log("返回的数据: " + data );
        }
    });

## `jquery ajax`发送一个`get`请求，简写方式： ##

其实就是对`ajax`的二次封装，大家可以对照`ajax`的底层`api`

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

## `jquery ajax`发送一个`POST`请求，简写方式： ##

其实就是对`ajax`的二次封装，大家可以对照`ajax`的底层`api`

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

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

`ajax`提交数据的时候，通常是提交一个表单，所以，序列化表单数据就非常有用，如：`$("form").serialize()`

//完整实例如：（表单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
        })

## `jquery ajax`请求成功回调改写成连写方式`.done` ##

`ajax`请求成功通常是使用回调的方式处理返回数据，其实`jquery`中也可以使用连写方式而不是回调的方式。如下：

//该参数可以是一个函数或一个函数的数组。当延迟成功时，done中函数被调用。回调执行是依照他们添加的顺序。
    //一旦deferred.done()返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.done()方法。当延迟解决，web前端开发
    $.get("ajax.php").done(function() { 
        //延迟成功
        alert("ok");
    }).fail(function(){ 
        //延迟失败;
        alert("$.get failed!");
    });

`jquery ajax`连写方式还有一个二合一的方法`.then`，`.then`还可以写多个，后面的`.then`可以使用前面`.then`中的结果

$.get("test.php").then(
        function(){ 
            //延迟成功
        },
        function(){ 
            //延迟失败;
        }
    );

## `jquery ajax`还有一个`jQuery.when`方法 ##

提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。 如果单一延迟传递给`jQuery.when` ，它是通过这个方法和延迟对象附加的其他方法可访问绑定的回调函数返回的，如`defered.then` 。  
当延迟得到解决或者拒绝，通常的代码创建了原来的延迟，适当的回调将被调用。 如下：

//两个全部请求成功才会执行回调 此api在jquery api的 “工具”一栏下面有详细介绍
    $.when($.ajax("p1.php"), $.ajax("p2.php"))
      .then(function(){ 
            //两个全部请求成功
        }, function(){ 
            //任何一个执行失败
        });

## `jquery ajax`的一个实战例子，`ajax`请求服务集中到`service.js`中 ##

这里把`jquery ajax`请求写成一个服务，比如`service.js`中有如下代码：

//每次都要重复的ajax代码和一些数据处理，全局提示都可以写到这里面了，当然这里面不要有业务逻辑，只做些数据处理和部分提示
    function myService(){ 
        return { 
            query: function (data) { 
                var _data = data||{ };
                return $.get("test.php",_data).then(
                        function(){ //延迟成功},
                        function(){ //延迟失败;}
                    );
            },
            submit: function (data) { 
                var _data = data||{ };
                return $.post("test.php",_data).then(
                        function(){ },
                        function(){ }
                    );
            }
        }
    }
    //当然这里面的 代码应该做模块化处理，而不是直接向这样声明一个全局的myService