JQuery中$.ajax()方法浅谈

sanlanlan 2018-2-9 标签: js 浏览:1663 评论:0

jquery中的ajax方法参数详解:


url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖全局设置。


cache: 要求为Boolean类型的参数,默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

data: 要求为 Object或String类型的参数,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataType:

要求为String类型的参数,




预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

  • "xml": 返回 XML 文档,可用 jQuery 处理。
  • "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
  • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
  • "json": 返回 JSON 数据 。
  • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
  • "text": 返回纯文本字符串


回调函数

如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。


beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }

complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
         (1)由服务器返回,并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }


error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }


示例代码1:


$(function(){
    $('#id').click(function(){
         $.ajax({
             type: "GET",
             url: "yourselfURL",
             data: {param1:$("#id1").val(), param2:$("#id2").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty(); //清空resText里面的所有内容 var html = ''; 
                         $.each(data, function(commentIndex, comment){
                             html += '<span class="badge">' +parseInt(commentIndex +1) + '</span>';
                             html += '<span>'+comment['address']+ '</span>';
                             html += '<span>' +comment['content']+ '</span>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

//返回来的data


"data": [ { "id": "22", "address": "上海", "content": "ok" }, 

{ "id": "33", "address": "深圳", "content": "yes" }]


这边的$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。


示例代码2:


//$.ajax带json数据的异步请求
var ajax = $.ajax( {  
    url:URL
    data:{  
             selRollBack : selRollBack,  
             selOperatorsCode : selOperatorsCode,  
             PROVINCECODE : PROVINCECODE,  
             pass2 : pass2  
    },  
    type:'post',  
    cache:false,  
    dataType:'json',  
    success:function(data) {  
        if(data.msg =="true" ){  
            alert("修改成功!");  
            window.location.reload();  
        }else{  
            view(data.msg);  
        }  
     },  
     complete: function() {
            if (Object.prototype.toString.apply(completeCallback) === "[object Function]") {
                completeCallback();
            } else {
                _hideLoading();
            }
        },
        error: function(xhl, textStatus, errorThrown) {
            if (Object.prototype.toString.apply(errorCallback) === "[object Function]") {
                errorCallback();
            } else {
                showAjaxErrorError(xhl, textStatus, errorThrown);
            }
        }

}); 
示例代码3:
//$.ajax序列化表格内容为字符串的异步请求
 function test(){  
     var data = $("#form1").serialize();//序列化表格内容为字符串  
     $.ajax({  
         type:'post',      
         url:URL,  
         data:data,  
         cache:false,  
         dataType:'json',  
             success:function(data){  
                
             }  
     });  
 }   


本文相关标签: jquery ajax

发表评论: