jsonp实现仿百度搜索（跨域访问）

最新推荐文章于 2024-06-20 20:55:24 发布

lan1977545649

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量2.2k

点赞数 1

分类专栏：原生js开发文章标签： jsonp 跨域访问仿百度

本文链接：https://blog.csdn.net/lan1977545649/article/details/83690429

版权

原生js开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jsonp实现仿百度搜索

一、jsonp跨域访问原理
利用script标签的src属性的漏洞实现跨域访问，去访问不同的服务器
二、仿百度搜索页面实现

<!DOCTYPE html>
<html>
<head>
	<title>jsonp</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0px;
			padding:0px;
		}
		li{
			list-style: none;
		}
		#wrap{
			width: 600px;
			height: 40px;
			margin:100px auto;
		}
		#text{
			width: 500px;
			height: 34px;
			margin: 0 auto;
			line-height: 34px;
		}
		#list{
			width: 500px;
			border: 1px solid #ccc;
		}
		#list>li{
			width: 500px;
			height: 30px;
			line-height: 30px;
		}
		#list>li>a{
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<input type="text" id="text" placeholder="请输入搜索关键字">
		<ul id="list"></ul>
	</div>
	<script type="text/javascript">
		//wd  查询关键字
		//cd 返回函数 回调函数
		let oInput=document.getElementById("text"),
			oList=document.getElementById("list");
			oInput.oninput=function(){
				var _val=this.value;//获取当前input框里的内容
				if(_val){
					let oS=document.createElement("script"); //创造script标签
					oS.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${_val}&cb=getDate`;
					document.body.appendChild(oS);
					oS.onload=function(){ //在script标签加载完后删除标签
						document.body.removeChild(oS);
					}
				}
			};
		function getDate(data){
			//data是后台发送过来的函数调用里的参数
			console.log(data);
			let arr=data.s, //获取联想词
				str='',
				len=arr.length;
			for(let i=0;i<len;i++){
				str+=`<li><a href="">${arr[i]}</a></li>`
			}
			oList.innerHTML=str;
		}
	</script>
</body>
</html>

lan1977545649

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jsonp实现仿百度搜索（跨域访问）

jsonp实现仿百度搜索一、jsonp跨域访问原理利用script标签的src属性的漏洞实现跨域访问，去访问不同的服务器二、仿百度搜索页面实现&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;jsonp&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;st
复制链接

扫一扫