$.ajax()方法详解及get查询案例

jquery中的ajax方法参数总是记不住,这里记录一下。

1.url:

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

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

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

4.async: 
要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

5.cache: 
要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

6.data: 
要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。

7.dataType: 
要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下: 
xml:返回XML文档,可用JQuery处理。 
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。 
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 
json:返回JSON数据。 
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 
text:返回纯文本字符串。

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

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

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

扫描二维码关注公众号,回复: 5034854 查看本文章

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

12.contentType: 
要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

13.dataFilter: 
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 
function(data, type){ 
//返回处理后的数据 
return data; 
}

14.dataFilter: 
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 
function(data, type){ 
//返回处理后的数据 
return data; 
}

15.global: 
要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified: 
要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

17.jsonp: 
要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分,例如{jsonp:’onJsonPLoad’}会导致将”onJsonPLoad=?”传给服务器。

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

19.password: 
要求为String类型的参数,用于响应HTTP访问认证请求的密码。

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

21.scriptCharset: 
要求为String类型的参数,只有当请求时dataType为”jsonp”或者”script”,并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

案例一查询

 
  1. <a href="#" style="text-decoration: none;">使用ajax提交表单数据</a>

  2. <div>

  3. <p id="divp">before..</p>

  4. </div>

  5.  
  6. <script type="text/javascript">

  7. $(function(){

  8. $("a").click(function(){

  9. //查询数据

  10. $.ajax({

  11. type:'get',

  12. url:'test.txt',

  13. cache:false,

  14. dataType:'json',

  15. success:function(data){

  16. var item;

  17. item=data.list[0].item;

  18. $("#divp").html(item);

  19. }

  20. });

  21. });

  22. })

  23. </script>

  •  

案例二代码:

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <title></title>

  5. <meta charset="UTF-8">

  6. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

  7. <script type="text/javascript">

  8. $(function () {

  9. $.ajax({

  10. url: 'test.txt',

  11. type: 'GET',

  12. dataType: 'json',

  13. timeout: 1000,

  14. cache: false,

  15. beforeSend: LoadFunction, //加载执行方法

  16. error: erryFunction, //错误执行方法

  17. success: succFunction //成功执行方法

  18. })

  19. function LoadFunction() {

  20. $("#list").html('加载中...');

  21. }

  22. function erryFunction() {

  23. alert("error");

  24. }

  25. function succFunction(tt) {

  26. $("#list").html('');

  27.  
  28. //eval将字符串转成对象数组

  29. //var json = { "id": "10086", "uname": "zhangsan", "email": "[email protected]" };

  30. //json = eval(json);

  31. //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

  32.  
  33. var json = eval(tt).list; //数组

  34. $.each(json, function(index,item) {

  35. //循环获取数据

  36. var name = json[index].item;

  37. var idnumber = json[index].IdNumber;

  38. var sex = json[index].Sex;

  39. $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");

  40. });

  41. }

  42. });

  43. </script>

  44. </head>

  45. <body>

  46. <ul id="list">

  47. </ul>

  48. </body>

  49. </html>

  •  

test.txt

 
  1. {

  2. "list":[

  3. {"item":"审计管理"},

  4. {"item":"菜单管理"},

  5. {"item":"订单管理"},

  6. {"item":"合同管理"},

  7. {"item":"物流管理"},

  8. {"item":"行政管理"},

  9. {"item":"人事管理"},

  10. {"item":"购物管理"},

  11. {"item":"批发管理"},

  12. {"item":"安全管理"},

  13. {"item":"账号管理"},

  14. {"item":"财务管理"},

  15. {"item":"其他管理"}

  16. ]

  17. }

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_34107571/article/details/86599752