（七）AJAX之jQuery操作&&全局处理程序

红太狼 2023-06-15 07:20 84阅读 0赞

# jQuery之AJAX #

*  日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。
 *  几种常用的方式 **$ .ajax**，**$ .post**， **$ .get**， **$ .getJSON**

### （1）jQuery之$.ajax ###

$.ajax是JQuery对ajax封装的最基础，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。  
常用的参数：

1.  **type**—数据的提交方式：get和post
2.  **url**—数据的提交路径
3.  **async**—是否支持异步刷新，默认是true异步
4.  **data**—参数值，需要提交的数据
5.  **dataType**—服务器返回数据类型，例如xml,String,Json,jsonp等
6.  **beforeSend**—请求前的回调函数、success—请求成功后的回调函数
7.  **error**—请求失败后的回调函数、complete请求完成的回调函数(不论成功失败)

### （2）jQuery之$.post ###

*  $ .post是对$ .ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$ .post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。
 *  在满足这些情况下，可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，不可以改变。

### （3）jQuery之$.get ###

和$.post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。

### （4）jQuery之$.getJSON ###

这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,\[data\],\[callback\]

# jQuery之$.ajax同源 #

$.ajax()方法实现**同源**数据请求

![在这里插入图片描述][20191121114235941.png]  
请求完毕后再对返回数据进行解析，然后更新至HTML模板即可实现局部更新页面

# jQuery之$.ajax跨域 #

$.ajax()方法实现**跨域**数据请求

<table> 
 <thead> 
  <tr> 
   <th>地址</th> 
   <th>https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>作用描述</td> 
   <td>获取百度智能匹配关键词</td> 
  </tr> 
  <tr> 
   <td>请求类型</td> 
   <td>get</td> 
  </tr> 
  <tr> 
   <td>参数</td> 
   <td>wd：关键字、cb回调函数</td> 
  </tr> 
  <tr> 
   <td>返回数据格式</td> 
   <td>jsonp格式</td> 
  </tr> 
 </tbody> 
</table>

其他设置和之前一样，直接修改js部分即可，如下所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
$.ajax()方法实现跨域数据请求**注意事项**  
使用jQuery获取跨域数据

1.  dataType:“jsonp”
2.  jsonp默认值"callback"，可以自行修改

# jQuery之$.ajax参数 #

###### 常用参数： ######

1.  **url**  
    **类型**：String  
    **默认值**: 当前页地址。发送请求的地址。
2.  **type**  
    **类型**：String  
    **默认值**：“GET”。请求方式POST或GET， 默认为 GET。注意：其它 HTTP 请求方法，如 DELETE 也可以使用，但仅部分浏览器支持。
3.  **async**  
    **类型**：Boolean  
    **默认值**: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。  
    **注意**：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 这里需要注意就是如果后面需要使用方法请求成功的数据，必须要设为**同步**，否则将会出现意想不到的错误，这个往往在刚开始使用ajax都会犯这个错误需特别留意
4.  **data**  
    **类型**：String  
    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
5.  **jsonp**  
    要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分
6.  **dataType**  
    **类型**：String  
    预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。  
    **dataType可用值**:  
    “**xml**”: 返回 XML 文档，可用 jQuery 处理。  
    “**html**”: 返回纯文本 HTML 信息；包含的 script 标签在插入 dom 时执行。  
    “**script**”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）  
    “**json**”: 返回 JSON 数据 。  
    “**jsonp**”: JSONP 格式。使用 JSONP 形式调用函数时，如 “callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。  
    ![在这里插入图片描述][20191121130600658.png]  
    “**text**”: 返回纯文本字符串
7.  **success**  
    要求为Function类型的参数，请求成功后调用的回调函数
8.  **error**  
    要求为Function类型的参数，请求失败时被调用的函数
9.  **beforeSend**  
    要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。
10. **complete**  
    要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
11. **jsonp**  
    请求自动带上callback参数，callback值为jsonpCallback的值
12. **jsonpCallback**  
    JSONP回调函数callback的值

# jQuery之AJAX案例 #

### 案例一：天气查询 ###

功能：  
输入框输入城市后，点击查询按钮，调用天气API，会在下方显示出搜索城市的天气及未来几天的天气预报。

聚合数据全国天气预报接口：https://www.juhe.cn/docs/api/id/39  
点击链接注册并获取KEY密钥，选择天气预报接口，可以免费调用500次  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

###### 天气查询—逻辑梳理 ######

1、输入城市名  
2、点击的时候发送请求  
3、响应成功渲染页面

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			*{ 
    				margin: 0;
    				padding: 0;
    			}
    			#weather{ 
    				width: 600px;
    				height: 460px;
    				margin: 30px auto 0;
    			}
    			#search_area{ 
    				width: 600px;
    				height: 40px;
    				/* border: 1px solid gray; */
    				display: flex;
    			}
    			#search_area input{ 
    				width: 80%;
    				height: 40px;
    				border: 1px solid gray;
    				outline: none;
    				box-sizing: border-box;
    				text-indent: 10px;
    			}
    			#search_area button{ 
    				width: 20%;
    				height: 40px;
    				border: none;
    				outline: none;
    				box-sizing: border-box;
    				background-color: #3385ff;
    				color: #fff;
    				cursor: pointer;
    			}
    			#infoArea{ 
    				width: 600px;
    				height: 400px;
    				background-color: #f7f8f9;
    				overflow: hidden;
    			}
    			#search_area button:hover{ 
    				background-color: #2d78f4;
    			}
    			p{ 
    				line-height: 34px;
    			}
    			p:nth-of-type(1){ 
    				margin-top: 10px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="weather">
    			<div id="search_area">
    				<input id="city" type="phone" placeholder="请输入要查询的城市"/>
    				<button id="search_btn">查询</button>
    			</div>
    			<div id="infoArea"></div>
    		</div>
    		
    		
    		<script type="text/javascript" src="js/jquery.min.js"></script>
    		<script type="text/javascript">
    			function callback_fn(){ 
    				
    			}
    			$(function(){ 
    				$("#search_btn").click(function(){ 
    					// if ($("#infoArea").length>1) { 
    					// $("#infoArea").remove();
    					// console.log("存在");
    					// }
    					$("#infoArea").html("");
    					var city = $("#city").val() || "北京";
    					$.ajax({ 
    						type:"get",
    						url:"http://v.juhe.cn/weather/index",
    						data:{ 
    						"format":2,
    						"cityname":city,
    						"key":'ef062365da83688ab5b4266d7a8bfdb1'
    						},
    						async:true,
    						dataType:"jsonp",
    						jsonCallback:"callback_fn",
    						success(data){ 
    							if(data.resultcode == 200){ 
    								var sk = data.result.sk;
    								var today = data.result.today;
    								var futur = data.result.future;/* 未来七天天气 */
    								var info = "";
    								console.log(data.result);
    								// console.log(data.result.future[0].temperature);
    								info += "<p>" + "当前城市：" + city + "  " + today.date_y  + "  "+ today.week + "</p>";
    								info += "<p>" + city + "：" + today.temperature + "，" + sk.wind_direction + sk.wind_strength + "，" + "<br/ >"
    								+ today.dressing_index + "，" + today.dressing_advice + "</p>";
    								info += "<hr/>";
    								info += "<p>未来七天天气状况：</p>";
    								$("#infoArea").append(info);
    
    								for(var i=0;i<futur.length;i++){ 
    									var seven = "";
    									// seven += "";
    									seven += "<p>" + futur[i].week + "  " + futur[i].temperature + "  " + futur[i].weather + "  " + futur[i].wind + "</p>";
    									
    									// console.log(sk[i].wind_direction)
    									// futur[i].date + futur[i].week + sk[i].wind_direction + sk[i].wind_strength;
    									
    									$("#infoArea").append(seven);
    								}
    							}else{ 
    								alert(data.reason);
    							}
    						},
    						error(){ 
    							alert("error");
    						}
    					})
    				})
    			})
    		</script>
    	</body>
    </html>

### 案例二：手机号查询 ###

JSON API免费线上接口：  
http://tcc.taobao.com/cc/json/mobile\_tel\_segment.htm?tel=手机号

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			* { 
    				margin: 0;
    				padding: 0;
    			}
    
    			#weather { 
    				width: 600px;
    				height: 300px;
    				margin: 30px auto 0;
    			}
    
    			#search_area { 
    				width: 600px;
    				height: 40px;
    				/* border: 1px solid gray; */
    				display: flex;
    			}
    
    			#search_area input { 
    				width: 80%;
    				height: 40px;
    				border: 1px solid gray;
    				outline: none;
    				box-sizing: border-box;
    				text-indent: 10px;
    			}
    
    			#search_area button { 
    				width: 20%;
    				height: 40px;
    				border: none;
    				outline: none;
    				box-sizing: border-box;
    				background-color: #3385ff;
    				color: #fff;
    				cursor: pointer;
    			}
    
    			#search_area button:hover { 
    				background-color: #2d78f4;
    			}
    
    			#infoArea { 
    				overflow: hidden;
    				width: 600px;
    				height: 260px;
    				background-color: #f7f8f9;
    			}
    
    			#infoArea img { 
    				display: none;
    				margin: 109px auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="weather">
    			<div id="search_area">
    				<input id="city" type="tel" placeholder="请输入要查询的手机号" />
    				<button id="search_btn">查询</button>
    			</div>
    			<div id="infoArea">
    				<img src="img/5-121204194114.gif">
    			</div>
    		</div>
    		<script type="text/javascript" src="js/jquery.min.js"></script>
    		<script type="text/javascript">
    			function callbackFn(option) { 
    				console.log("自定义成功");
    				console.log(option);
    			}
    			$(function() { 
    				$(document).ajaxStart(function(event, request, settings) { 
    					$("#infoArea").html('<img src="img/5-121204194114.gif" id="loadingImg" style="display: block;">');
    				})
    				$(document).ajaxSuccess(function(event, request, settings) { 
    					$("#loadingImg").css("display", "none");
    				})
    				$("#search_btn").click(function() { 
    					let tel = $("input[type=tel]").val();
    					var zz = /^1(3|4|5|6|7|8|9)\d{9}$/;
    					var num = $("#city").val();
    					if (num == "") { 
    						alert("请输入手机号");
    						return false;
    					} else if (zz.test(num)) { 
    						$.ajax({ 
    							url: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
    							type: "get",
    							data: { 
    								"tel": tel
    							},
    							async: true,
    							dataType: "jsonp",
    							jsonCallback: "callbackFn",
    							success: function(tel) { 
    								let showHtml = "";
    								showHtml += "<p>一级归属：" + tel.catName + "</p>";
    								showHtml += "<p>二级归属：" + tel.carrier + "</p>";
    								showHtml += "<p>归属地：" + tel.province + "</p>";
    								showHtml += "<p>手机号：" + tel.ispVid + "</p>";
    								$("#infoArea").html(showHtml);
    							},
    							error: function(error) { 
    								console.log(error);
    							}
    						})
    					} else { 
    						alert("您输入的手机号不正确");
    						$("#city").val("");
    						$("#infoArea").text('');
    					}
    				})
    			})
    		</script>
    	</body>
    </html>

# API接口 #

**拓展**：  
提供JSON格式数据返回服务网站的API接口，为大家搜集了一些能够返回JSON格式的服务接口。部分需要用JSONP调用  
链接：http://www.bejson.com/knownjson/webInterface/

# 全局事件处理程序 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>jQuery.ajax()</td> 
   <td>执行异步 HTTP (Ajax) 请求。</td> 
  </tr> 
  <tr> 
   <td>.ajaxSend()</td> 
   <td>在 Ajax 请求发送之前显示一条消息</td> 
  </tr> 
  <tr> 
   <td>.ajaxStart()</td> 
   <td>当首个 Ajax 请求完成开始时注册要调用的处理程序。</td> 
  </tr> 
  <tr> 
   <td>.ajaxStop()</td> 
   <td>当所有 Ajax 请求完成时注册要调用的处理程序</td> 
  </tr> 
  <tr> 
   <td>.ajaxSuccess()</td> 
   <td>当 Ajax 请求成功完成时显示一条消息</td> 
  </tr> 
  <tr> 
   <td>.ajaxError()</td> 
   <td>当 Ajax 请求完成且出现错误时注册要调用的处理程序</td> 
  </tr> 
  <tr> 
   <td>.ajaxComplete()</td> 
   <td>当 Ajax 请求完成时注册要调用的处理程序</td> 
  </tr> 
 </tbody> 
</table>

详情参见jquery的AJAX官方API文档  
链接：https://api.jquery.com/category/ajax/global-ajax-event-handlers/

[20191121114235941.png]: https://img-blog.csdnimg.cn/20191121114235941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121130125602.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191121130600658.png]: https://img-blog.csdnimg.cn/20191121130600658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191121130849380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191121131124576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70