當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2024/9/19 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax 使用 JSONP 时，只能 GET 不能 POST 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

ajax不支持用 JSONP(JSON with Padding) 跨域發(fā)起 post 請(qǐng)求
html在線運(yùn)行https://www.runoob.com/runcode

ajax 為什么不支持用 jsonp 跨域發(fā)起 post 請(qǐng)求？

因?yàn)?jsonp 的實(shí)現(xiàn)方式，導(dǎo)致 jsonp 無法發(fā)起 post 請(qǐng)求，實(shí)在是力不從心吶。

JSONP的最基本的原理是：動(dòng)態(tài)添加一個(gè)<script>標(biāo)簽，而script標(biāo)簽的src屬性是沒有跨域的限制的。

簡(jiǎn)單說一下，想了解更多看一下后面的參考或者自行網(wǎng)上查找：

假定需求為：使用 jsonp 方式訪問douban的接口https://wthrcdn.etouch.cn/weather_mini?citykey=101090101&callback=callback。該接口的返回內(nèi)容為：

說明：

該接口返回的內(nèi)容有個(gè)特征，為：callback(xxx);，將上述內(nèi)容與https://wthrcdn.etouch.cn/weather_mini?citykey=101090101接口對(duì)比一下接口看出不同來了。

網(wǎng)頁(yè)代碼

<!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>

在線運(yùn)行:https://www.runoob.com/runcode

將上述代碼改為使用 ajax 調(diào)用。

<!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>

說明：

在線運(yùn)行效果不變。

怎么才能在跨域請(qǐng)求時(shí)，發(fā)起 post 請(qǐng)求呢？

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。

參考

JSONP 原理介紹

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

JSONP 技術(shù)介紹

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

天氣預(yù)報(bào)接口

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

總結(jié)

以上是生活随笔為你收集整理的ajax 使用 JSONP 时，只能 GET 不能 POST的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：消息称字节跳动旗下 PICO 第一方 V
下一篇：联发科 10 月营收 428.11 亿元