正文
用ajax获取淘宝关键字接口
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
可定需要查看淘宝界面的结构，按F12查看网页，此时先清除一下网页中的数据，让Network制空，随后在输入框中输入新的内容，比如钱包，数据中会出现新的数据。点击及查看蓝色方框中的内容
点击之后，你可以查看要访问的地址，及响应的结果
从第二步访问到的路由地址，会是我们调用的接口，如下图；
最后响应给我们的结果就是第三步的内容，下面是我给的源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./Pycharm/jq/1.5.2/jquery-1.5.2.min.js"></script>
</head>
<body>
<input type="text" value="">
<ul></ul>
<script>
$(function () {
$("input").keyup(function () {
var $v = $(this).val();
$.ajax({
type:"post",
url:"https://suggest.taobao.com/sug?code=utf-8&callback=jsonp392&k=1&area=c2c&bucketid=20",
data:{
q:$v
},
async:false,
dataType:"jsonp",
success:function(res){
console.log(res);
$("ul").empty();
$.each(res.result,function(i,v){
var $li = $("<li>");
console.log(i)
console.log(v)
$li.html(v[0]);
$li.appendTo($("ul"));
})
}
})
})
})
</script></body>
</html>
说明：对于第二步，复制的请求地址：
https://suggest.taobao.com/sug?code=utf-8&q=qian&_ksTS=1517635754012_391&callback=jsonp392&k=1&area=c2c&bucketid=20中，在代码中将&q=qian&_ksTS=1517635754012_391去除，应为后续会用ajax继续传送ajax的值，
而对于请求地址，也可以这样写
url:"https://suggest.taobao.com/sug?code=utf-8&callback=?",
对于jsonp:
JSONP(json with Padding)是json的一种使用模式，可用于解决主流的浏览器跨域数据访问的问题。（不支持post请求）
核心：通过script标签的src属性，进行域名的包装来完成跨域请求数据的而访问，src来模拟数据的来源，通过和要访问的服务器域名一致，进行同源数据的访问，间接实现跨域数据的访问
Json和jsonp的区别：
json是一种数据格式，jsonp是数据访问的方式
原生js跨域：原生js中，通过动态增加script标签，指定src属性进行数据的跨域访问
另加一个以前编写的，这个不需要修改jq地址，jq是一个地址，可以直接使用，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
input{
width:400px;
height: 40px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
width: 400px;
}
ul li{
height: 38px;
width:100%;
line-height: 38px;
border-bottom:1px dotted #ccc;
}
</style>
</head>
<body>
<!--https://suggest.taobao.com/sug?code=utf-8&q=aaa&callback=jsonp876-->
<input type="text" value=""/>
<ul>
</ul>
</body>
<script>
$(function(){
$("input").keyup(function(){
var $v = $(this).val();
$.ajax({
type:"post",
url:"https://suggest.taobao.com/sug?code=utf-8&callback=?",
async:true,
data:{
q:$v
},
dataType:"jsonp",
success:function(res){
console.log(res);
$("ul").empty();
$.each(res.result,function(i,v){
var $li = $("<li>");
console.log(i)
console.log(v)
$li.html(v[0]);
$li.appendTo($("ul"));
})
}
});
});
});
</script>
</html>
结果：
