您的位置：首页 > Web前端 > JavaScript

JSONP解决跨域完整例子

2016-07-22 15:16 471 查看

1.这个案例是仿照百度搜索，输入关键词，会出现下拉菜单的过程。

效果：

2.具体做法：

（1）利用百度的数据库做script标签的src。

复制之后的地址是这样的
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1449_20495_13549_17947_20417_15394_11949_20592&req=2&sc=eb&csor=0&cb=jQuery110208732901320327073_1469159304078&_=1469159304101
在浏览器新的窗口中打开，就会给你返回这样的

这样就知道了，s代表的就是数据，在后面的编程中，就可以data.s[i]来获取里面的内容了。

（2）可以对上面的地址进行修改，改为自己定义的callback函数，就是里面的cb可以改一下。里面没有用的都可以删掉，用这样的地址可以访问到。
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=d&cb=miaov&_=1469159304099

所以就可以用这样的地址作为src了

3.代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baidu</title>
<style>
#q{
width: 300px;
height: 30px;
border: 1px solid #f90;
font-size: 16px;
}
#ul1{
border: 1px solid #f90;
width: 300px;
padding: 0;
margin: 0;
display: none;
}
li a{
display: block;
line-height: 30px;
text-decoration: none;
color: black;
padding: 5px;
}
li a:hover{
background: #f90; color: white;
}
</style>

<script>
function miaov(data){
var oUl=document.getElementById("ul1");
var html='';
if (data.s.length) {//s表示数据，这句话意思是如果数据不为空
oUl.style.display = 'block';
for(var i=0;i<data.s.length;i++){
html+='<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>';
}
//target="_blank"表示打开一个新的窗口，后面的href是为了跳转资源的。
oUl.innerHTML=html;
}else{
oUl.style.display='none';//如果没有这样的data内容就就将下拉列表隐藏
}
}

window.onload=function(){
var oQ=document.getElementById("q");
var oUl=document.getElementById("ul1");

oQ.onkeyup=function(){
if (this.value!='') {//输入不是空的时候
var oScript=document.createElement('script');
oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=miaov' ;//cb就是callback函数
document.body.appendChild(oScript);
}else{
oUl.style.display='none';//输入是空的时候，就不显示。
}
}
}
</script>
</head>
<body>
<input type="text" id="q">
<ul id="ul1">
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航