前言

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

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

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

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

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

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

说明：

该接口返回的内容有个特征，为：callback(xxx);，将上述内容与https://wthrcdn.etouch.cn/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='https://wthrcdn.etouch.cn/weather_mini?citykey=101090101&callback=callback' type="text/javascript" charset="UTF-8"></script></script>
</html>

在线运行:https://www.runoob.com/runcode
将上述代码改为使用 ajax 调用。

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

说明：

在线运行效果不变。

怎么才能在跨域请求时，发起 post 请求呢？

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

参考

JSONP 原理介绍

https://blog.csdn.net/z69183787/article/details/19191385

JSONP 技术介绍

https://www.cnblogs.com/fnz0/p/6778503.html
https://blog.csdn.net/qq_39043923/article/details/88681807
https://blog.csdn.net/u010200636/article/details/83060249

非 JSONP 的跨域方案

https://www.cnblogs.com/guaishushulz/p/6707707.html

天气预报接口

http://wthrcdn.etouch.cn/weather_mini?citykey=101090101&callback=callback

ajax 使用 JSONP 时，只能 GET 不能 POST相关推荐

原生JavaScript实现AJAX、JSONP
相信大部分前端开发者经常会用jquery的ajax方法与后台进行交互,但是有些时候,我们只需要用到ajax请求数据,而其他的功能几乎用不到,所以就需要知道原生js的ajax请求方法. ajax简介 a ...
ajax跨域时使得后台的sessionid不断地的变化，以及layui表格支持跨域的方法，java
java+ajax跨域sessionid不断变化由于实现一个功能,需要实现一个在过滤器中使用session的程序, 结果在前端使用ajax访问后台时,后台一直不能获取session存的值,导致了某一 ...
IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法
转载自 IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法最近在测试兼容性问题的时候发现,使用Ajax的GET请求向后台获取响应结果时,如果是IE8浏览器,第一次发送请求时会得到正 ...
ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
ajax的jsonp原理,jsonp 跨域原理和用法（上篇）
出于对网站安全性的要求,两个不同域名的网站之间是不能通过前端技术互相发送请求的.但有时我们又需要使用这样的机制.比如:网站需要制作一个天气预报插件,或者需要开发两个网站,一个供外部用户使用,一个供内部 ...
ajax异步传输数据时return返回总是undefined（转载）
写ajax传送数据时,需要用到异步,如上代码即总会返回undefined,很是费解.各种方式调试,后来广阅网上博客 ,发现其实很多人遇到过这样的问题,大家都说原因是Jquery的ajax是异步,大多时 ...
原生js实现Ajax，JSONP
Ajax内部的几个执行步骤创建XMLHttpRequest对象(new XMLHttpRequest()) 设置请求头(setRequestHeader) 连接服务器(open()) 设置回调(on ...
怎么测试ajax get请求,为什么我的AJAX在运行测试时请求dev中的PUT请求，但请求了GET请求？...
在我的Rails应用程序中,我制作了一个AJAX PUT请求(使用Coffeescript),该请求在我的开发环境中正常工作.当我检查按钮,点击后,会触发使用Firefox的AJAX请求时,它看起来是 ...
Ajax和Jsonp实践
之前一直使用jQuery的ajax方法,导致自己对浏览器原生的XMLHttpRequest对象不是很熟悉,于是决定自己写下,以下是个人写的deom,发表一下,聊表纪念. Ajax 和 jsonp 的j ...

ajax 使用 JSONP 时，只能 GET 不能 POST

前言