跨域之jsonp

mac2022-06-30  22

<!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.οnkeyup=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.οnclick=function(){ window.location.href=`http://www.baidu.com/s?wd=${el}`; } }); } var ocli=document.querySelector("#cli"); ocli.οnclick=function(){ window.location.href=`http://www.baidu.com/s?wd=${otext.value}`; } </script></body>

</html>

转载于:https://www.cnblogs.com/angle-xiu/p/11210569.html

相关资源:ajax跨域请求jsonp前后台代码
最新回复(0)