跨域之jsonp


<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="yixiu" />
<meta name="keyword" content="haha">
<title>伪百度</title>
<style type="text/css">
.in {
position: relative;
left: 0;
top: 0;
height: 300px;
text-align: center;
}

#list {
position: relative;
left: -37px;
top: 1px;
display: none;
margin: 0 auto;
padding: 0;
list-style: none;
width: 590px;
border: #0000 solid 1px;
cursor: pointer;
}
#list li{
text-align: left;
font-size:13px;
height: 20px;
line-height: 1.56;
}
#list li:hover{
background: pink;
}
</style>
</head>
<body>
<p align="center">
<img src="C:\Users\ASUS\Pictures\Saved Pictures\3.jpg" border="0" width="30%" height="50%">
</p>
<div text-align="center">
<a href="http://news.baidu.com/" title="haha">百度</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="https://map.baidu.com/">地图</a>
<a href="http://v.baidu.com/">视频</a>
<a href="https://tieba.baidu.com/index.html">贴吧</a>
<a href="http://xueshu.baidu.com/">学术</a>
</div>
<div class="in">
<form action="">
<input type="text" size="80" name="" id="text">
<input type="button" name="#baidu" value="百度一下" id="cli" />
<ul id="list"></ul>

</form>
</div>
<p align="center">问题请反馈<a href="mailto:someone@baidu.com?subject=问题反馈">发送邮件
</a>
</p>
<script type="text/javascript">
/*jsonp跨域*/
var otext=document.querySelector("#text");
var olist=document.querySelector("#list");
otext.onkeyup=function(){
olist.innerHTML="";
var val=this.value;
if(val.length==0)
{
olist.style.display="none";
}
else{
olist.style.display="block";
var oscript=document.createElement("script");
oscript.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=java`;
document.body.appendChild(oscript);
}
}
//数据处理
function java(arg){
var attr=arg.s//储存json数据
attr.forEach(el => {//箭头函数绑定上级作用域
var oli=document.createElement("li");
oli.innerHTML="<span>"+el+"</span>";
olist.appendChild(oli);
oli.onclick=function(){
window.location.href=`http://www.baidu.com/s?wd=${el}`;
}
});
}
var ocli=document.querySelector("#cli");
ocli.onclick=function(){
window.location.href=`http://www.baidu.com/s?wd=${otext.value}`;
}
</script>
</body>

</html>

上一篇:javascript – 当JSONP数据发生变化时


下一篇:Java Servlet(六):HttpServlet实现原理(jdk7+tomcat7+eclipse)