jsonp解决跨域（案例：动态获取百度数据）

最新推荐文章于 2023-04-22 13:02:12 发布

原创最新推荐文章于 2023-04-22 13:02:12 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #原生js #jsonp跨域 #动态获取script标签 #动态获取百度数据

原生js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种实现跨域请求数据的方法——JSONP。通过动态创建 script 标签并利用全局函数接收数据的方式，使得跨域请求成为可能。文章以百度搜索建议为例，详细展示了如何使用 JSONP 获取并展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsonp了解一下，只要你看了，相信你就能懂！
首先我们先简单回忆一下ajax，ajax我们都不陌生，经常用，ajax的优点是不刷新整个页面从后台获取数据，但是也有缺点啊，不能跨域啊！但是好多时候我们还就得跨域请求数据。所以jsonp出场了。
必须清楚的一点，json和jsonp是没有任何关系的。jsonp是一种可以跨域获取数据的手段。
jsonp实现原理：动态创建script标签，在全局设置一个函数来接收script标签引进来的函数调用，然后在全局这个函数中接收数据。
接下来。。。代码演示

// input框输入内容，下面li里会显示相对应的数据
<input type='text' placeholder="请输入关键词" id='inp' />
<ul class='ul'>
      <!-- <li>数据1</li> -->
</ul>

// js代码 
var oInp = document.querySelector('#inp');
var oUl = document.querySelector('.ul');    
function show(json) { // 全局函数show
	console.log(json.s); // 这个s 不知道是啥？ 先别管。继续往下看
	oUl.innerHTML = ''; // 每次加载清空原先的
	for(var i=0; i<json.s.length; i++) { // 循环渲染
		var oLi = document.createElement('li'); // 创建li
		oLi.innerHTML = json.s[i]; // 把每一条内容渲染到页面上
		oUl.appendChild(oLi); // 把li追加到ul里
	}
}

oInp.oninput = function() { // 获取我们输入的内容
	var inpVal = this.value; // 输入框内容
	var script = document.createElement('script'); // 动态创建script
	// console.log(script)
	script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+inpVal+'&cb=show'; // script引入的src
	document.documentElement.appendChild(script); // 这句儿就不用说了吧
}

最后我们看看script标签引入的那串src怎么截取到的。。。

script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+inpVal+'&

今天太累了，改天继续。。。
想知道的朋友点个关注呗，下次持续更新。。。嘿嘿在这里插入图片描述