如何使用JSONP实现跨域请求？

最新推荐文章于 2025-05-07 10:47:30 发布

stevenITBoy

最新推荐文章于 2025-05-07 10:47:30 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： AJAX 文章标签：如何使用JSONP实现跨域请求 jsonp 聚合数据数据免费

本文链接：https://blog.youkuaiyun.com/stevenITBoy/article/details/52211085

1 篇文章

订阅专栏

本文介绍如何利用JSONP实现跨域数据请求，并提供三种不同场景的实例：直接引入静态src、静态方式和动态方式。此外，还展示了使用jQuery简化跨域请求的方法。

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

步骤：

1、准备数据：

（1）、注册聚合数据（网址是：https://www.juhe.cn/），可以获取免费的数据。

（2）、注册完成后，（使用的数据是“手机号码归属地”），找到这个页面，然后申请数据。

（3）、请求示例的地址就是我们所需要的数据，你会看到上面key=您申请的KEY,那么如何找到你的key呢？

（4）、那么此时我们的静态地址是http://apis.juhe.cn/mobile/get?phone=13429667914&key=您申请的KEY。我这里没有改key后面的值，你需要自己改下才可以哦。

获取后的数据是（见下图）：

2、使用工具：IDE是WebStorm

3、使用原生JavaScript来实现跨域请求。我们要实现跨域请求就要使用script的src属性自有的特性，因为src是没有域名限制。我们让src来引入一个数据接口。

demo-1的实例(此实例直接引入静态src)：

JS原生跨域数据,通过script的src属性获取静态手机号码归属地




demo-2的实例（此实例是静态的）：

js原生跨域数据，通过script的src属性获取静态手机号码归属地数据


查看手机归属地：




demo-3的实例（此实例是动态的）：

js原生跨域数据jsonp，通过script的src属性动态获取手机归属地数据


查看手机归属地：




4、原生的需要我们在原始数据后添加自己key和value，使用jQuery就方便多了，下面使用$.ajax({})的方法实现的：

Title


查看手机归属地：







总结：如遇到问题，可以跟我说。好了，今天就分享到这里。