欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

针对jquery的ajax中的参数理解

程序员文章站 2022-03-29 14:33:35
1. url 发送请求的地址。为空表示当前页。 1 $.ajax({ 2 type: "post", 3 data: studentInfo, 4 contentType: "application/json", 5 url: "/Home/Submit",//请求的接口 6 beforeSend: ......

1. url

发送请求的地址。为空表示当前页。 

针对jquery的ajax中的参数理解
 1 $.ajax({
 2     type: "post",
 3     data: studentinfo,
 4     contenttype: "application/json",
 5     url: "/home/submit",//请求的接口
 6     beforesend: function () {
 7         // 禁用按钮防止重复提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "success") {
12             //清空输入框
13             clearbox();
14         }
15     },
16     complete: function () {
17         $("#submit").removeattr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responsetext);
21     }
22 });
view code

2. type

请求方式,get或post或put或delete。默认为get。put和delte不是得到所有的浏览器支持。

针对jquery的ajax中的参数理解
 1 $.ajax({
 2     type: "post",//请求的方式
 3     data: studentinfo,
 4     contenttype: "application/json",
 5     url: "/home/submit",
 6     beforesend: function () {
 7         // 禁用按钮防止重复提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "success") {
12             //清空输入框
13             clearbox();
14         }
15     },
16     complete: function () {
17         $("#submit").removeattr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responsetext);
21     }
22 });
view code

3. datatype

预期服务器返回的数据类型。若没指定,则自动根据http包中的mime信息来判断。可用值为xml,html,script,json,jsonp,text。

针对jquery的ajax中的参数理解
 1 $.ajax({
 2           url: "/count/storage/data?callback=storagesurvey",
 3           datatype: "json",  //指定服务器返回的数据类型为json
 4           type: "get", 
 5           async:true,  
 6           jsonp: "callback", ///指定参数名称,默认为callback  
 7           jsonpcallback:"storagesurvey", //指定回调函数名称
 8           success: function (data) {
 9                    storagesurvey_local(data);
10           },
11           error:function () {
12             alert("error");
13     }
14 }
view code

4. async

默认为true,即请求为异步请求,这也是ajax存在的意义。但同时也可以将这个参数设置为false,实现同步请求。(同步请求会锁定浏览器,直到这个请求结束后才可以执行其他操作)

针对jquery的ajax中的参数理解
 1 $.ajax({
 2                     url: "/handle/do.aspx",
 3                     type: "post",
 4                     data: { id: '0' },
 5                     async:true,//默认异步false,同步true。
 6                     datatype: "json",
 7                     success: function(msg) {
 8                         alert(msg);
 9                     },
10                     error: function(xmlhttprequest, textstatus, errorthrown) {
11                         alert(xmlhttprequest.status);
12                         alert(xmlhttprequest.readystate);
13                         alert(textstatus);
14                     },
15                     complete: function(xmlhttprequest, textstatus) {
16                         this; // 调用本次ajax请求时传递的options参数
17                     }
18                 });
view code 

5. headers

jquery1.5添加。一个用于一起进行请求的额外的key/value对的map。这项需要在beforesend方法被调用前设置,因为headers中的任意值都有肯那个在beforesend方法中被覆盖。

针对jquery的ajax中的参数理解
 1 通过beforesend获取header信息
 2 $.ajax({
 3                     type: "get",
 4                     url: "default.aspx",
 5                     beforesend: function(request) {
 6                         request.setrequestheader("token", "token");
 7                     },
 8                     success: function(result) {
 9                         alert(result);
10                     }
11                 });
12 
13 setting参数 headers 比如项目中请求接口需要传token
14 $.ajax({
15     headers: {
16         accept: "application/json; charset=utf-8",
17       authorization: token
18     },
19     type: "get",
20     success: function (data) {
21     }
22 });
view code

6. beforesend (xhr)

这个方法是用来在发送请求前修改xmlhttprequest对象的,若修改失败返回false,则取消此次ajax请求.

针对jquery的ajax中的参数理解
 1 $.ajax({
 2     type: "post",
 3     data: studentinfo,
 4     contenttype: "application/json",
 5     url: "/home/submit",
 6     beforesend: function () {//请求前做的事
 7         // 禁用按钮防止重复提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "success") {
12             //清空输入框
13             clearbox();
14         }
15     },
16     complete: function () {
17         $("#submit").removeattr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responsetext);
21     }
22 });
view code

7. cache

默认为true,设置为false即不缓存。(当datatype为script或jasonp时默认为fasle)

针对jquery的ajax中的参数理解
 1 $.ajax({
 2     type: "post",
 3     data: studentinfo,
 4     contenttype: "application/json",
 5     url: "/home/submit",
 6     cache:true,//默认为true,false不清缓存。
 7     beforesend: function () {
 8         // 禁用按钮防止重复提交
 9         $("#submit").attr({ disabled: "disabled" });
10     },
11     success: function (data) {
12         if (data == "success") {
13             //清空输入框
14             clearbox();
15         }
16     },
17     complete: function () {
18         $("#submit").removeattr("disabled");
19     },
20     error: function (data) {
21         console.info("error: " + data.responsetext);
22     }
23 });    
view code

8. data

发送到服务器的数据。必须为key/value格式。且自动转换为query string,get请求会将字符串附加在url后。

针对jquery的ajax中的参数理解view code

9. traditional

设置为true,用传统的方式来序列化数据。

针对jquery的ajax中的参数理解view code

10. timeout

设置请求超时时间,毫秒为单位。此设置会覆盖全局设置,即所有ajax请求共享同一个超时时间。

$.ajax({
  url:'', //请求的url
  timeout : 1000, //超时时间设置,单位毫秒
  type : 'get', //请求方式,get或post
  data :{}, //请求所传参数,json格式
   datatype:'json',//返回的数据格式
   success:function(data){ //请求成功的回调函数
     alert("成功");
  },
  complete : function(xmlhttprequest,status){ //请求完成后最终执行参数
     if(status=='timeout'){//超时,status还有success,error等值的情况
       ajaxtimeouttest.abort();
      alert("超时");
    }
  }
 });

11.contenttype

它是发送到服务器的额数据的内容编码类型,它的默认值是"appliction/x-www-form-urlencoded"。传递的服务器的数据通常以utf-8编码。

针对jquery的ajax中的参数理解view code

12. success(data,textstatus,xhr)

请求成功后的回调函数。参数由服务器返回,并会根据datatype参数进行参数处理。

针对jquery的ajax中的参数理解
 1 $.ajax({
 2   url:'', //请求的url
 3   type : 'get', //请求方式,get或post
 4   data :{}, //请求所传参数,json格式
 5    datatype:'json',//返回的数据格式
 6    success:function(data){ //请求成功的回调函数
 7      alert("成功");
 8   },
 9    error: function (data) {
10           console.info("error: " + data.responsetext);
11    },
12   complete : function(xmlhttprequest,status){ //请求完成后最终执行参数
13      if(status=='timeout'){//超时,status还有success,error等值的情况
14        ajaxtimeouttest.abort();
15       alert("超时");
16     }
17   }
18  });
view code

13. error (xhr,textstatus,errorthrown)

当请求失败时调用这个方法。textstatus为错误信息,可用值为error,timeout,abort,parsererror。errorthrown为可选的要捕获的异常对象。

$.ajax({
  url:''//请求的url
  type : 'get'//请求方式,get或post
  data :{}, //请求所传参数,json格式
   datatype:'json',//返回的数据格式
   success:function(data){ //请求成功的回调函数
     alert("成功");
  },
   error: function (data) {//错误的回调函数
          console.info("error: " + data.responsetext);
   },
  complete : function(xmlhttprequest,status){ //请求完成后最终执行参数
     if(status=='timeout'){//超时,status还有success,error等值的情况
       ajaxtimeouttest.abort();
      alert("超时");
    }
  }
 });

14. complete(jqxhr,textstatus)

请求完成后的回调函数,无论成功与否。textstatus为一个描述请求类型的字符串,它可以有以下值success,notmodified,error,timeout,abort,parsererror。

针对jquery的ajax中的参数理解
 1 $.ajax({
 2     type: "post",
 3     data: studentinfo,
 4     contenttype: "application/json",
 5     url: "/home/submit",
 6     beforesend: function () {
 7         // 禁用按钮防止重复提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "success") {
12             //清空输入框
13             clearbox();
14         }
15     },
16     complete: function () {//请求之后执行的函数
17         $("#submit").removeattr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responsetext);
21     }
22 });
view code

15. contents

jquery1.5添加。一个字符串或常规表达式的map,用来确定用何种方式处理jquery的response。

针对jquery的ajax中的参数理解
 1 $.ajax({
 2         url: 'home/index',
 3         type: 'post',
 4         datatype: 'mytype',//自定义类型
 5         contents: {//当把一个自定义的datatype选项类型转换为一个已知的类型的时候需要使用contents参数
 6             mytype: /mytype/
 7         },
 8         converters: {
 9             'text mycustomtype': true,
10             'mycustomtype json': function () {
11                 console.log('converters')
12             }
13         }
14     })
view code

16. context

用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。

针对jquery的ajax中的参数理解
1 $.ajax({
2         url: "url",
3         context: document.body
4     }).done(function() {                
5          $(this).addclass( "done" );        
6 });
7 this是documnet.body 
8 context参数作用 将回调里的this替换为context里对应的值。
view code

17. converters

jquery1.5添加。一组数据类型到数据类型的转换。每一个转换值都是一个返回了response转换后的值的方法。

18. crossdomain

false表示同一域请求,true表示跨域请求。它可以使服务器端重定向到另外一个域。

19. datafilter (data,type)

将ajax的返回值进行预处理的函数,data为返回值,teype为传递的datatype参数。

20. global

默认为true,触发全局ajax事件。设置为false可以用来不触发。可以用来控制不同的ajax事件。

21. ifmodified

默认为false,仅在服务器数据改变时获取数据,使用http包中的last-modified头信息判断。

22. islocal

jquery1.5.1添加。允许将当前环境识别为local,jquery默认是不会识别的。file,*-extension 和widget协议可以被识别为local。如果islocal需要被修改,推荐使用$.ajaxsetup()方法。

23. jsonp

要求为string类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种get或post请求中url参数里的"callback"部分,例如{jsonp:'onjsonpload'}会导致将"onjsonpload=?"传给服务器。

针对jquery的ajax中的参数理解
 1       $.ajax({
 2           url: "/count/storage/data?callback=storagesurvey",
 3           datatype: "jsonp",  //指定服务器返回的数据类型为jsonp  通常指的是跨域
 4           type: "get", 
 5           async:true,  
 6           jsonp: "callback", ///指定参数名称,默认为callback  
 7           jsonpcallback:"storagesurvey", //指定回调函数名称
 8           success: function (data) {
 9                    storagesurvey_local(data);
10           },
11           error:function () {
12             alert("error");
13     }
view code

24. jsonpcallback

为jsonp请求指定一个回调函数名。jquery会自动生成随机函数名,用这个值可以修改此名。

针对jquery的ajax中的参数理解
 1 $.ajax({
 2  9             type : "get",
 3 10             async:false,
 4 11             url : "ajax.ashx",
 5 12             datatype : "jsonp",
 6 13             jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
 7 14             jsonpcallback:"success_jsonpcallback",//自定义的jsonp回调函数名称,默认为jquery自动生成的随机函数名
 8 15             success : function(json){
 9 16                 alert(json);
10 17                 alert(json[0].name);
11 18             },
12 19             error:function(){
13 20                 alert('fail');
14 21             }
15 22         });
view code

25. mimetype

jquery1.5.1添加。可以用来覆盖xhr中的mimetype。

26. password

要求为string类型的参数,用于响应http访问认证请求的密码。

27. processdata

要求为boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送dom树信息或者其他不希望转换的信息,请设置为false。

28. scriptcharset

只有当请求为jsonp或script,并且type为get时才会用于强制修改charset。

针对jquery的ajax中的参数理解
 1 $.ajax({ 
 2       url: testurl, 
 3       datatype: 'jsonp', 
 4       type: 'post', 
 5       scriptcharset: 'utf-8'
 6     });
 7 使用scriptcharset即可解决问题,用contenttype就不一定可以了。
 8 
 9 上面的解决方案是最完美的,另外网上的一般解决方式吧,是用contenttype来处理的。
10 
11 $.ajax({ 
12 url: "ajax.aspx?a=memberlogin", 
13 type: "post", 
14 datatype: "json", 
15 contenttype: "application/x-www-form-urlencoded; charset=utf-8", 
16 success: callback
17     });
view code

29. statuscode

jquery1.5添加。用来定义http的返回码对应的处理函数。下面的例子定义了返回404后的处理方法。

针对jquery的ajax中的参数理解
1  $.ajax({ 
2    statuscode: { 
3    404: function() { 
4    alert("page not found"); 
5    } 
6    } 
7 }); 
view code

30.username

用于响应http访问认证要求为string类型的参数,用于响应http访问认证请求的用户名。

31. xhr

默认在ie下是activexobject而其他浏览器是xmlhttprequest。用于重写或提供一个增强的xmlhttprequest对象。

32. xhrfields

jquery1.5.1添加。它可以添加到原生xhr对象上的key/value对。举个例子,你可以通过它来设置跨域的withcredentials为true。

针对jquery的ajax中的参数理解
1 $.ajax({   
2     url: a_cross_domain_url,   
3     xhrfields: {   
4     withcredentials: true   
5     }   
6 });  
7 支持withcredentials属性的浏览器有firefox 3.5+、safari 4+和chrome。ie10及更早版本都不支持
8 在jquery1.5中,withcredentials这个属性不在原生的xhr中,所以这个请求会被忽略到。若要测试这个例子,需要使用jquery1.5.1。
view code