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

时间:2022-11-21 21:39:38

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

大家好,今天分享一个我自己写的跨域请求的demo,看了网上的代码有的数据很复杂,有的又很啰嗦。我用最简单的demo讲明白。如何跨域请求?


步骤: 1、准备数据: (1)、注册聚合数据网址是:https://www.juhe.cn/),可以获取免费的数据。 (2)、注册完成后,(使用的数据是“手机号码归属地),找到这个页面,然后申请数据。 如何使用JSONP实现跨域请求?

(3)、请求示例的地址就是我们所需要的数据,你会看到上面key=您申请的KEY,那么如何找到你的key呢?
如何使用JSONP实现跨域请求?

(4)、那么此时我们的静态地址是http://apis.juhe.cn/mobile/get?phone=13429667914&key=您申请的KEY。我这里没有改key后面的值,你需要自己改下才可以哦。 获取后的数据是(见下图): 如何使用JSONP实现跨域请求?

2、使用工具:IDE是WebStorm
3、使用原生JavaScript来实现跨域请求。我们要实现跨域请求就要使用script的src属性自有的特性,因为src是没有域名限制。我们让src来引入一个数据接口。
demo-1的实例(此实例直接引入静态src):
demo-2的实例(此实例是静态的):
demo-3的实例(此实例是动态的):
4、原生的需要我们在原始数据后添加自己key和value,使用jQuery就方便多了,下面使用$.ajax({})的方法实现的:

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