100字范文 > ajax 使用 JSONP 时只能 GET 不能 POST

ajax 使用 JSONP 时只能 GET 不能 POST

时间：2020-07-12 07:13:34

前言

ajax不支持用 JSONP(JSON with Padding) 跨域发起 post 请求html在线运行/runcode

ajax 为什么不支持用 jsonp 跨域发起 post 请求？

因为 jsonp 的实现方式，导致 jsonp 无法发起 post 请求，实在是力不从心呐。

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。

简单说一下，想了解更多看一下后面的参考或者自行网上查找：

假定需求为：使用 jsonp 方式访问douban的接口/weather_mini?citykey=101090101&callback=callback。该接口的返回内容为：

说明：

该接口返回的内容有个特征，为：callback(xxx);，将上述内容与/weather_mini?citykey=101090101接口对比一下接口看出不同来了。网页代码

<!DOCTYPE html><html><head><title>test</title><meta charset="UTF-8"></head><body></body><script type="text/javascript">function callback(res){success(res.data);}function success(res){alert(JSON.stringify(res));}</script><script src='/weather_mini?citykey=101090101&callback=callback' type="text/javascript" charset="UTF-8"></script></script></html>

在线运行:/runcode

将上述代码改为使用 ajax 调用。

<!DOCTYPE html><html><head><title>test</title><meta charset="UTF-8"><script src="/jquery/3.5.0/jquery.min.js"></script></head><body></body><script type="text/javascript">$.ajax({url: "/weather_mini",data: {citykey:'101090101'},dataType:'jsonp',jsonpCallback:'callback',success: function(res) {alert(JSON.stringify(res)); }});</script></script></html>

说明：

在线运行效果不变。