JSONP接口调用案例

最新推荐文章于 2025-06-16 15:21:30 发布

置顶

Zippo

最新推荐文章于 2025-06-16 15:21:30 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： web java 文章标签： JSONP接口调用

本文链接：https://blog.youkuaiyun.com/weixin_43494908/article/details/84991239

JSONP是一种解决浏览器跨域数据访问的模式，利用<script>元素的特性，通过指定回调函数来接收服务端返回的JSON数据。在客户端注册回调函数，并在服务端动态生成JavaScript代码，调用该函数传递数据。本文介绍了JSONP的工作原理，并通过示例展示了如何进行JSONP接口测试，包括使用jQuery进行无参和有参调用，以及在SSM架构下创建本地测试接口的注意事项。

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

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。-源自百度百科

主要解决：

跨域传输数据的问题，应用场景就是需要跨域传输数据的场景
原理是script脚本的src可以不在同一个域名下，src中加入回调函数名（例如callback）
并将该函数在当前页面注册并实现，服务端根据回调函数名返回回调函数及参数（参数为跨域传输的数据），这样会调用之前注册的回调函数，里面直接取参数即可

1.在客户端调用提供JSONP支持的URL Service，获取JSONP格式数据。大的项目中单点登录会用到（解决不同子系统间的数据传输）

jsonp接口测试：（调用外部接口）

接口测试地址：http://api.asilu.com/#geo

如果需要参数，记得填 data：‘’，参数下面是无参调用。

jquery：网络地址（对于jquery版本不做要求，尽量不要太低）