专注前端开发和vps技术交流的博客-纸飞机jquery:写得少做得多。
jquery中对ajax也进行了封装。简单易用,其使用过程中基本上都是照葫芦画瓢,我们来看下葫芦:
$.ajax({
type: "method"
async:boolean,
url: "url",
data: "data",
cache:boolean,
dataType: "dataType",
success: function(response) {
}
});我们来对这个葫芦详细的解释一下:
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。
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：返回纯文本字符串。
jsonpCallback:该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分。
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
- 由服务器返回，并根据dataType参数进行处理后的数据。
- 描述状态的字符串。
jquery的ajax用法案例(画瓢):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('#search').on('keyup', function() {
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=";
$.ajax({
type: "get",
//async:true,//可选
url: url + $(this).val() + "&cb=callback",
// data: "data",//可选
dataType: "jsonp",
cache: true, //可选
jsonpCallback: "callback", //代替请求地址中的callback参数
success: function(response) {
console.log(response); //打印出返回的数据
}
});
});
});
</script>
</head>
<body>
<input type="text" id="search">
</body>
</html>这里实现的是input输入框按键弹起,就打印百度搜索框里的搜索相关数据,例如我输入12306
数据获取到了,就可以进行你的其他操作了,直观的看出反回了一个jsonp格式的数据,好了以上就是本次的瓢。
