日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2024/9/19 javascript 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 ajax 使用 JSONP 时，只能 GET 不能 POST 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

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

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

因為 jsonp 的實現(xiàn)方式，導致 jsonp 無法發(fā)起 post 請求，實在是力不從心吶。

JSONP的最基本的原理是：動態(tài)添加一個<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>

    說明：

    • 在線運行效果不變。

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

    CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。

    它允許瀏覽器向跨源服務器，發(fā)出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的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。