在以前的$.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) { //裝在獲取的數據 var newstr = ''; //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 . ")"; ?>