jQueryAJAX的$.ajax()用jsonp解決跨域問題
阿新 • • 發佈：2019-02-12
在以前的$.ajax()的跨域解決辦法是：先訪問本地伺服器，在本地伺服器中再訪問到遠端伺服器。
可是呢！大家有沒有覺得那種辦法會在效能上稍有欠缺呢，會不會造成資源成本的浪費呢！？
接下來，我要用的是jsonp解決跨域訪問伺服器的方式。
一、html中寫js進行訪問。注：引入jQuery的庫
<html> <head> <script type="text/javascript" src="jquery-3.0.0.min.js"></script> </head> <body> <button id="send">get/post JSON</button> <p id="result"></p> <script> $(function () { $('#send').click(function () { //jsonp解決跨域(訪問遠端伺服器)問題 $.ajax({ //url:"http://伺服器地址：埠號/伺服器檔案路徑 //伺服器地址要注意是ipv4的，ipv6測試暫時沒成功。 url: "http://192.168.191.7:8989/phpProject/crossDomain /jsonServer.php", //get/post都可以的請求方式 type: "POST", //是否同步，false為非同步載入 async: false, //設定返回資料型別jsonp dataType: "jsonp", //jsonp的欄位，伺服器返回的字首要和這個一樣 jsonp: "jsoncallback", //data: {name:"Lily"}, success: function (json) { //裝在獲取的資料 varnewstr = ''; //json為獲取的資料，記得給伺服器設定charset=utf-8;否則返回中文亂碼 $.each(json, function (i, v) { //json把資料給了v newstr = newstr + " " + v.name; }); //把得到的所有name欄位都加入#result $("#result").append(newstr); }, error: function () { //訪問出錯彈出 alert('fail'); } }); }); }); </script> </body> </html>
二、伺服器：jsonServer.php
<?php /** * Created by PhpStorm. * User: 洋 汪 * Date: 2016/8/10 * Time: 20:32 */ header("Content-type:text/html;charset=utf-8"); //htmlspecialchars() 函式把一些預定義的字元轉換為 HTML 實體。 //獲取回撥函式名 $jsoncallback = isset($_REQUEST['jsoncallback']) ? htmlspecialchars($_REQUEST['jsoncallback']) : ''; //json資料 $jsonData = '[{name:"汪洋"},{name:"wangyang"}]'; //輸出json資料 echo $jsoncallback . "(" . $jsonData . ")"; ?>