jQuery之AJAX
- 日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。
- 几种常用的方式 $ .ajax，$ .post， $ .get， $ .getJSON
（1）jQuery之$.ajax
$.ajax是JQuery对ajax封装的最基础，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。
常用的参数：
- type—数据的提交方式：get和post
- url—数据的提交路径
- async—是否支持异步刷新，默认是true异步
- data—参数值，需要提交的数据
- dataType—服务器返回数据类型，例如xml,String,Json,jsonp等
- beforeSend—请求前的回调函数、success—请求成功后的回调函数
- 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()方法实现同源数据请求
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:'new_file.txt',/* 发送请求的接口地址 */
type:"get",/* 请求方式 */
dataType:"text",/* 预期服务器返回的数据类型 */
async:true,/* 是否为异步请求 */
success(option){
console.log(option)
},
error(){
console.log('error');
}
})
})
</script>
请求完毕后再对返回数据进行解析，然后更新至HTML模板即可实现局部更新页面
jQuery之$.ajax跨域
$.ajax()方法实现跨域数据请求
| 地址 | https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/ |
|---|---|
| 作用描述 | 获取百度智能匹配关键词 |
| 请求类型 | get |
| 参数 | wd：关键字、cb回调函数 |
| 返回数据格式 | jsonp格式 |
其他设置和之前一样，直接修改js部分即可，如下所示
$.ajax()方法实现跨域数据请求注意事项
使用jQuery获取跨域数据
- dataType:“jsonp”
- jsonp默认值"callback"，可以自行修改
jQuery之$.ajax参数
常用参数：
- url
类型：String
默认值: 当前页地址。发送请求的地址。 - type
类型：String
默认值：“GET”。请求方式POST或GET， 默认为 GET。注意：其它 HTTP 请求方法，如 DELETE 也可以使用，但仅部分浏览器支持。 - async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 这里需要注意就是如果后面需要使用方法请求成功的数据，必须要设为同步，否则将会出现意想不到的错误，这个往往在刚开始使用ajax都会犯这个错误需特别留意 - data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 - jsonp
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分 - 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 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串 - success
要求为Function类型的参数，请求成功后调用的回调函数 - error
要求为Function类型的参数，请求失败时被调用的函数 - beforeSend
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。 - complete
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 - jsonp
请求自动带上callback参数，callback值为jsonpCallback的值 - jsonpCallback
JSONP回调函数callback的值
jQuery之AJAX案例
案例一：天气查询
功能：
输入框输入城市后，点击查询按钮，调用天气API，会在下方显示出搜索城市的天气及未来几天的天气预报。
聚合数据全国天气预报接口：https://www.juhe.cn/docs/api/id/39
点击链接注册并获取KEY密钥，选择天气预报接口，可以免费调用500次
天气查询—逻辑梳理
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/
全局事件处理程序
| 函数 | 描述 |
|---|---|
| jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 |
| .ajaxSend() | 在 Ajax 请求发送之前显示一条消息 |
| .ajaxStart() | 当首个 Ajax 请求完成开始时注册要调用的处理程序。 |
| .ajaxStop() | 当所有 Ajax 请求完成时注册要调用的处理程序 |
| .ajaxSuccess() | 当 Ajax 请求成功完成时显示一条消息 |
| .ajaxError() | 当 Ajax 请求完成且出现错误时注册要调用的处理程序 |
| .ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序 |
详情参见jquery的AJAX官方API文档
链接：https://api.jquery.com/category/ajax/global-ajax-event-handlers/
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
