经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » jQuery » 查看文章
针对jquery的ajax中的参数理解
来源:cnblogs  作者:F.dragon  时间:2018/9/25 20:07:03  对本文有异议

1. url

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

  1. 1 $.ajax({
  2. 2 type: "post",
  3. 3 data: studentInfo,
  4. 4 contentType: "application/json",
  5. 5 url: "/Home/Submit",//请求的接口
  6. 6 beforeSend: function () {
  7. 7 // 禁用按钮防止重复提交
  8. 8 $("#submit").attr({ disabled: "disabled" });
  9. 9 },
  10. 10 success: function (data) {
  11. 11 if (data == "Success") {
  12. 12 //清空输入框
  13. 13 clearBox();
  14. 14 }
  15. 15 },
  16. 16 complete: function () {
  17. 17 $("#submit").removeAttr("disabled");
  18. 18 },
  19. 19 error: function (data) {
  20. 20 console.info("error: " + data.responseText);
  21. 21 }
  22. 22 });
View Code

2. type

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

  1. 1 $.ajax({
  2. 2 type: "post",//请求的方式
  3. 3 data: studentInfo,
  4. 4 contentType: "application/json",
  5. 5 url: "/Home/Submit",
  6. 6 beforeSend: function () {
  7. 7 // 禁用按钮防止重复提交
  8. 8 $("#submit").attr({ disabled: "disabled" });
  9. 9 },
  10. 10 success: function (data) {
  11. 11 if (data == "Success") {
  12. 12 //清空输入框
  13. 13 clearBox();
  14. 14 }
  15. 15 },
  16. 16 complete: function () {
  17. 17 $("#submit").removeAttr("disabled");
  18. 18 },
  19. 19 error: function (data) {
  20. 20 console.info("error: " + data.responseText);
  21. 21 }
  22. 22 });
View Code

3. dataType

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

  1. 1 $.ajax({
  2. 2 url: "/count/storage/data?callback=storageSurvey",
  3. 3 dataType: "json", //指定服务器返回的数据类型为json
  4. 4 type: "GET",
  5. 5 async:true,
  6. 6 jsonp: "callback", ///指定参数名称,默认为callback
  7. 7 jsonpCallback:"storageSurvey", //指定回调函数名称
  8. 8 success: function (data) {
  9. 9 storageSurvey_local(data);
  10. 10 },
  11. 11 error:function () {
  12. 12 alert("error");
  13. 13 }
  14. 14 }
View Code

4. async

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

  1. 1 $.ajax({
  2. 2 url: "/Handle/Do.aspx",
  3. 3 type: "post",
  4. 4 data: { id: '0' },
  5. 5 async:true,//默认异步false,同步true。
  6. 6 dataType: "json",
  7. 7 success: function(msg) {
  8. 8 alert(msg);
  9. 9 },
  10. 10 error: function(XMLHttpRequest, textStatus, errorThrown) {
  11. 11 alert(XMLHttpRequest.status);
  12. 12 alert(XMLHttpRequest.readyState);
  13. 13 alert(textStatus);
  14. 14 },
  15. 15 complete: function(XMLHttpRequest, textStatus) {
  16. 16 this; // 调用本次AJAX请求时传递的options参数
  17. 17 }
  18. 18 });
View Code 

5. headers

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

  1. 1 通过beforeSend获取Header信息
  2. 2 $.ajax({
  3. 3 type: "GET",
  4. 4 url: "default.aspx",
  5. 5 beforeSend: function(request) {
  6. 6 request.setRequestHeader("token", "token");
  7. 7 },
  8. 8 success: function(result) {
  9. 9 alert(result);
  10. 10 }
  11. 11 });
  12. 12
  13. 13 setting参数 headers 比如项目中请求接口需要传token
  14. 14 $.ajax({
  15. 15 headers: {
  16. 16 Accept: "application/json; charset=utf-8"
  17. 17 Authorization: token
  18. 18 },
  19. 19 type: "get",
  20. 20 success: function (data) {
  21. 21 }
  22. 22 });
View Code

6. beforeSend (XHR)

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

  1. 1 $.ajax({
  2. 2 type: "post",
  3. 3 data: studentInfo,
  4. 4 contentType: "application/json",
  5. 5 url: "/Home/Submit",
  6. 6 beforeSend: function () {//请求前做的事
  7. 7 // 禁用按钮防止重复提交
  8. 8 $("#submit").attr({ disabled: "disabled" });
  9. 9 },
  10. 10 success: function (data) {
  11. 11 if (data == "Success") {
  12. 12 //清空输入框
  13. 13 clearBox();
  14. 14 }
  15. 15 },
  16. 16 complete: function () {
  17. 17 $("#submit").removeAttr("disabled");
  18. 18 },
  19. 19 error: function (data) {
  20. 20 console.info("error: " + data.responseText);
  21. 21 }
  22. 22 });
View Code

7. cache

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

  1. 1 $.ajax({
  2. 2 type: "post",
  3. 3 data: studentInfo,
  4. 4 contentType: "application/json",
  5. 5 url: "/Home/Submit",
  6. 6 cache:true,//默认为true,false不清缓存。
  7. 7 beforeSend: function () {
  8. 8 // 禁用按钮防止重复提交
  9. 9 $("#submit").attr({ disabled: "disabled" });
  10. 10 },
  11. 11 success: function (data) {
  12. 12 if (data == "Success") {
  13. 13 //清空输入框
  14. 14 clearBox();
  15. 15 }
  16. 16 },
  17. 17 complete: function () {
  18. 18 $("#submit").removeAttr("disabled");
  19. 19 },
  20. 20 error: function (data) {
  21. 21 console.info("error: " + data.responseText);
  22. 22 }
  23. 23 });
View Code

8. data

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

View Code

9. traditional

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

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编码。

View Code

12. success(data,textStatus,XHR)

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

  1. 1 $.ajax({
  2. 2   url:'', //请求的URL
  3. 3   type : 'get', //请求方式,get或post
  4. 4   data :{}, //请求所传参数,json格式
  5. 5   dataType:'json',//返回的数据格式
  6. 6   success:function(data){ //请求成功的回调函数
  7. 7     alert("成功");
  8. 8   },
  9. 9 error: function (data) {
  10. 10 console.info("error: " + data.responseText);
  11. 11 },
  12. 12   complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
  13. 13     if(status=='timeout'){//超时,status还有success,error等值的情况
  14. 14       ajaxTimeoutTest.abort();
  15. 15       alert("超时");
  16. 16     }
  17. 17   }
  18. 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。

  1. 1 $.ajax({
  2. 2 type: "post",
  3. 3 data: studentInfo,
  4. 4 contentType: "application/json",
  5. 5 url: "/Home/Submit",
  6. 6 beforeSend: function () {
  7. 7 // 禁用按钮防止重复提交
  8. 8 $("#submit").attr({ disabled: "disabled" });
  9. 9 },
  10. 10 success: function (data) {
  11. 11 if (data == "Success") {
  12. 12 //清空输入框
  13. 13 clearBox();
  14. 14 }
  15. 15 },
  16. 16 complete: function () {//请求之后执行的函数
  17. 17 $("#submit").removeAttr("disabled");
  18. 18 },
  19. 19 error: function (data) {
  20. 20 console.info("error: " + data.responseText);
  21. 21 }
  22. 22 });
View Code

15. contents

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

  1. 1 $.ajax({
  2. 2 url: 'Home/Index',
  3. 3 type: 'post',
  4. 4 dataType: 'mytype',//自定义类型
  5. 5 contents: {//当把一个自定义的dataType选项类型转换为一个已知的类型的时候需要使用contents参数
  6. 6 mytype: /mytype/
  7. 7 },
  8. 8 converters: {
  9. 9 'text mycustomtype': true,
  10. 10 'mycustomtype json': function () {
  11. 11 console.log('converters')
  12. 12 }
  13. 13 }
  14. 14 })
View Code

16. context

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

  1. 1 $.ajax({
  2. 2         url: "url",
  3. 3         context: document.body
  4. 4     }).done(function() {                
  5. 5          $(this).addClass( "done" );        
  6. 6 });
  7. 7 thisdocumnet.body 
  8. 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=?"传给服务器。

  1. 1 $.ajax({
  2. 2 url: "/count/storage/data?callback=storageSurvey",
  3. 3 dataType: "jsonp", //指定服务器返回的数据类型为jsonp 通常指的是跨域
  4. 4 type: "GET",
  5. 5 async:true,
  6. 6 jsonp: "callback", ///指定参数名称,默认为callback
  7. 7 jsonpCallback:"storageSurvey", //指定回调函数名称
  8. 8 success: function (data) {
  9. 9 storageSurvey_local(data);
  10. 10 },
  11. 11 error:function () {
  12. 12 alert("error");
  13. 13 }
View Code

24. jsonpCallback

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

  1. 1 $.ajax({
  2. 2 9 type : "get",
  3. 3 10 async:false,
  4. 4 11 url : "ajax.ashx",
  5. 5 12 dataType : "jsonp",
  6. 6 13 jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
  7. 7 14 jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
  8. 8 15 success : function(json){
  9. 9 16 alert(json);
  10. 10 17 alert(json[0].name);
  11. 11 18 },
  12. 12 19 error:function(){
  13. 13 20 alert('fail');
  14. 14 21 }
  15. 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。

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

29. statusCode

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

  1. 1 $.ajax({
  2. 2 statusCode: {
  3. 3 404: function() {
  4. 4 alert("page not found");
  5. 5 }
  6. 6 }
  7. 7 });
View Code

30.username

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

31. xhr

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

32. xhrFields

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

  1. 1 $.ajax({
  2. 2 url: a_cross_domain_url,
  3. 3 xhrFields: {
  4. 4 withCredentials: true
  5. 5 }
  6. 6 });
  7. 7 支持withCredentials属性的浏览器有Firefox 3.5+、Safari 4+和ChromeIE10及更早版本都不支持
  8. 8 jQuery1.5中,withCredentials这个属性不在原生的xhr中,所以这个请求会被忽略到。若要测试这个例子,需要使用jQuery1.5.1
View Code

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号