废话不多说 ，先贴代码
代码块
<body>
<input type="text" />
<ul></ul>
<script>
var input=document.querySelector("input");
var ul=document.querySelector("ul");
input.onclick=function(){
var script=document.createElement("script");
script.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=fn1';
document.body.appendChild(script);
document.body.removeChild(script);
}
function fn1(data){
//我们需要的data参数已经通过数据库传入了函数，不需要我们另行传入。
console.log(data);
var str='';
//data.s在最后一张图可以明了
if(!data.s.length){
ul.style.display='none';
ul.innerHTML='';
}else{
ul.style.display='block';
for(var i=0;i<data.s.length;i++){
str+='<li>'+data.s[i]+'</li>';
}
ul.innerHTML=str;
}
};
</script>
</body>
其实就是一个通过访问百度服务器数据，然后展示在本地页面上的一个jsonp。
首先我们要拿到访问百度服务器的一个网址
0.4.png
右击，copy，copy link address。
得到如下：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1427_21109_18560_17001_23536_22160&req=2&bs=%E5%90%91%E6%97%A5%E8%91%B5&csor=0&cb=jQuery1102022528784831170223_1500709212726&_=1500709212727
但是我们不需要这么多，精简一下：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=fn1
参数 值
wd 关键字
cb 回调函数
输入的时候回去请求百度的数据，他是放在百度的服务器中，我们在本机，这就是跨域，用到了jsonp。
jsonp出来之后特别流行，而且操作方便，ajax操作的时候可能会出现很多错误，jsonp不会。
简单说就是一个get请求，就是一个地址 。
就是一个script标签，javascript文件，拿到文件之后通过dom或者javascript的操作方法把数据展示到页面中，这就是jsonp的数据交互。
网友评论