Jquery之ajax

柔光的暖阳◎ 2022-05-19 13:26 221阅读 0赞

# Jquery之ajax #

### 一、load ###

1、概述

![70][]

2，用法

<table> 
 <tbody> 
 <tr> 
 <td style="width:7px;"> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td style="width:1px;">&nbsp;</td> 
 <td> &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;id="cl"&gt;我需要阳光&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="dis"&gt;&lt;/div&gt; &lt;/body&gt; &lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#cl").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dis").load('http://maizi.itpaimai.com/jquery/load/'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

二、get

1、概述

![70 1][]

2、用法

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> 
 <td>&nbsp;</td> 
 <td> &lt;body&gt; &lt;label&nbsp;for=""&gt;&nbsp;get&nbsp;的方式&nbsp;获取&nbsp;手机信息&lt;/label&gt; &lt;div&gt;手机：&nbsp;&lt;input&nbsp;type="text"&nbsp;name="phone"&nbsp;id="iphone_g"&nbsp;placeholder="请输入手机号"/&gt;&lt;/div&gt; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;id="get_msg"&gt;获取的信息显示在这里&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;id="get_msg_do"&gt;点击获取&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_msg_do").click(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;iphone&nbsp;=&nbsp;$("#iphone_g").val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;'http://maizi.itpaimai.com/jquery/get/'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;{phone:iphone}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.get(url,data,function(msg){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(msg.errNum=='-1'){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_msg").text(msg.retMsg); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_msg").text(msg.retData.supplier+':'+msg.retData.province+msg.retData.city+':'+msg.retData.suit); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},'jsonp'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

三、post

1，概述

![70 2][]

2、用法

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> 
 <td>&nbsp;</td> 
 <td> &lt;body&gt; &lt;label&nbsp;for=""&gt;&nbsp;post&nbsp;的方式&nbsp;获取&nbsp;手机信息&lt;/label&gt; &lt;div&gt;手机：&nbsp;&lt;input&nbsp;type="text"&nbsp;name="phone"&nbsp;id="iphone_g"&nbsp;placeholder="请输入手机号"/&gt;&lt;/div&gt; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;id="get_msg"&gt;获取的信息显示在这里&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;id="get_msg_do"&gt;点击获取&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_msg_do").click(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;iphone&nbsp;=&nbsp;$("#iphone_g").val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;'http://maizi.itpaimai.com/jquery/post/'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;{phone:iphone}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.post(url,data,function(msg){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(msg.errNum=='-1'){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_msg").text(msg.retMsg); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_msg").text(msg.retData.supplier+':'+msg.retData.province+msg.retData.city+':'+msg.retData.suit); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},'json'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

四、ajax

1、概述：

![70 3][]

2、用法

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 </td> 
 <td>&nbsp;</td> 
 <td> &lt;body&gt; &lt;label&nbsp;for=""&gt;ajax&nbsp;跨域方式&nbsp;验证用户名&lt;/label&gt; &lt;div&gt;用户名：&nbsp;&lt;input&nbsp;type="text"&nbsp;id="username"&nbsp;placeholder="请输入你的用户名"/&gt;&lt;/div&gt; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;id="msg"&gt;获取的信息显示在这里&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;id="get_msg_do"&gt;点击获取&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_msg_do").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;name&nbsp;=&nbsp;$("#username").val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;'http://maizi.itpaimai.com/jquery/ajax/'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;{username:name}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:"GET", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:url, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:data, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:'jsonp', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:function(msgs){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#msg").text(msgs); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error:function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#msg").text('link&nbsp;fail'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

[70]: /images/20220519/224ebf5f147c464d963de96f1be287e0.png
[70 1]: /images/20220519/3dca4dd5e449451f9609db3a7b835f3d.png
[70 2]: /images/20220519/8c001ecf45d448f6b9177aa9aa385839.png
[70 3]: /images/20220519/52eaa880d9a344d68ec8be3fd7481ea8.png