Query Ajax 实例 ($.ajax、$.post、$.get)

今天药忘吃喽~ 2024-01-20 08:16 12阅读 0赞

Jquery在异步提交方面封装的很好，直接用AJAX非常麻烦，Jquery大大简化了我们的操作，不用考虑浏览器的诧异了。

推荐一篇不错的jQuery Ajax 实例文章，忘记了可以去看看，地址为：http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/

$.post、$.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()

**一、$.ajax的一般格式**

$.ajax(\{

type: 'POST',

url: *url* ,

data: *data* ,

success: *success* ,

dataType: *dataType*

\});

**二、$.ajax的参数描述**

参数 描述

<table style="color:rgb(0,0,0); font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:14px; line-height:25.200000762939453px; text-align:left"> 
 <tbody> 
  <tr></tr> 
  <tr> 
   <td style="font-size:1em"><em>url</em></td> 
   <td style="font-size:1em">必需。规定把请求发送到哪个 URL。</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em"><em>data</em></td> 
   <td style="font-size:1em">可选。映射或字符串值。规定连同请求发送到服务器的数据。</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em"><em>success(data, textStatus, jqXHR)</em></td> 
   <td style="font-size:1em">可选。请求成功时执行的回调函数。</td> 
  </tr> 
  <tr> 
   <td style="font-size:1em"><em>dataType</em></td> 
   <td style="font-size:1em"> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 可选。规定预期的服务器响应的数据类型。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 默认执行智能判断（xml、json、script 或 html）。</p> </td> 
  </tr> 
 </tbody> 
</table>

**三、$.ajax需要注意的一些地方：**

1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。

2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

**四、$.ajax我的实际应用例子**

Js代码 [![收藏代码][icon_star.png]][icon_star.png 1]

1.  //1.$.ajax带json数据的异步请求
2.  **var** aj = $.ajax( \{ 
3.   url:'productManager\_reverseUpdate',// 跳转到 action 
4.   data:\{ 
5.   selRollBack : selRollBack, 
6.   selOperatorsCode : selOperatorsCode, 
7.   PROVINCECODE : PROVINCECODE, 
8.   pass2 : pass2 
9.   \}, 
10.  type:'post', 
11.  cache:**false**, 
12.  dataType:'json', 
13.  success:**function**(data) \{ 
14. **if**(data.msg =="true" )\{ 
15. // view("修改成功！"); 
16.  alert("修改成功！"); 
17.  window.location.reload(); 
18.  \}**else**\{ 
19.  view(data.msg); 
20.  \} 
21.  \}, 
22.  error : **function**() \{ 
23. // view("异常！"); 
24.  alert("异常！"); 
25.  \} 
26. \}); 
27. 
28. 
29. //2.$.ajax序列化表格内容为字符串的异步请求
30. **function** noTips()\{ 
31. **var** formParam = $("\#form1").serialize();//序列化表格内容为字符串 
32.  $.ajax(\{ 
33.  type:'post', 
34.  url:'Notice\_noTipsNotice', 
35.  data:formParam, 
36.  cache:**false**, 
37.  dataType:'json', 
38.  success:**function**(data)\{ 
39.  \} 
40.  \}); 
41. \} 
42. 
43. 
44. //3.$.ajax拼接url的异步请求
45. **var** yz=$.ajax(\{ 
46.  type:'post', 
47.  url:'validatePwd2\_checkPwd2?password2='\+password2, 
48.  data:\{\}, 
49.  cache:**false**, 
50.  dataType:'json', 
51.  success:**function**(data)\{ 
52. **if**( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 
53.  \{ 
54.  textPassword2.html("<font color='red'>业务密码不正确！</font>"); 
55.  $("\#validatePassword2").val("pwd2Error"); 
56.  checkPassword2 = **false**; 
57. **return**; 
58.  \} 
59.  \}, 
60.  error:**function**()\{\} 
61. \}); 
62. 
63. 
64. //4.$.ajax拼接data的异步请求
65. $.ajax(\{ 
66.  url:'<%=request.getContextPath()%>/kc/kc\_checkMerNameUnique.action', 
67.  type:'post', 
68.  data:'merName='\+values, 
69.  async : **false**, //默认为true 异步 
70.  error:**function**()\{ 
71.  alert('error'); 
72.  \}, 
73.  success:**function**(data)\{ 
74.  $("\#"\+divs).html(data); 
75.  \} 
76. \});

[icon_star.png]: http://jun1986.iteye.com/images/icon_star.png
[icon_star.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/20/2de0e0e436b44a5e8785aa048e878721.png