使用Ajax跨域实现百度搜索功能
上图
实现过程
1. 在百度上随便搜索一个内容
2. 在Network中找到一个地址右击 copy 然后 Copy link address
3. 将地址保存起来，取出中间有用的部分作为url属性的值，只需截取到 &wd 之前即可
栗子：
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1440,32745,7542,32795,32723,32231,7517,32781,32116,32719,26350&wd=php&req=2&csor=3&pwd=ph&cb=jQuery11020916663046629572_1601203241918&_=1601203241921
我们需要截取的地址：
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1440,32745,7542,32795,32723,32231,7517,32781,32116,32719,26350
4.开始敲代码
html
<body>
<div id="container">
<input type="text" name="keyword" id="keyword">
<input type="button" value="百度一下" id="search">
<div id="search-info"></div>
</div>
</body>
css
<style type="text/css">
#container{
margin: 100px auto;
width: 500px;
text-align: center;
padding: 10px;
}
#container ul{
margin: 0;
}
#container li{
list-style: none;
text-align: left;
padding-left: 45px;
height: 25px;
line-height: 25px;
cursor: pointer;
}
#keyword{
width: 220px;
margin: auto;
height: 25px;
border: none;
border: 2px solid #c4c7ce;
}
#search{
background-color: #4e6ef2;
color: white;
border: none;
border-radius: 3px;
width: 80px;
height: 30px;
}
#search-info{
width: 480px;
text-align: center;
margin: auto;
}
#search-info li:hover{
background-color: #4e6ef2;
}
</style>
js
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#keyword").keyup(function () {
var kw = $(this).val();
$.ajax({
url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1440,32745,7542,32795,32723,32231,7517,32781,32116,32719,26350',
jsonp: 'cb',
//jsonp是jQuery提供的方法
//百度是根据以cb开头的方法名字，所以通过jsonp来定义
//服务器通过这个来得到函数的名字
data: {wd: kw},
//kw是input的id值，用来拼接我们在搜索框中输入的值，这个参数在data中传递
//之前是在url属性中写入 "接口地址wd"='+kw'
dataType: 'jsonp',
//必须使用jsonp，这是跨域接口，指定返回的参数类型
success: function (data) {
var list = data.g
var tag = '<ul>';
for(var i= 0;i<list.length;i++){
var listdata = data.g[i].q;
tag += '<li>'+listdata+'</li>';
}
tag += '</ul>';
$("#search-info").html(tag);
}
});
});
})
</script>
其中 var list = data.g 中的data得到的是一个数组，可通过console.log(data)在服务器查看
当在搜素框中输入php ，服务器打印的结果是数组,而我们想要的是data下面的g下面的q
var listdata = data.g[i].q 就可以通过遍历得到我们想要的数据并渲染在页面上
