關於Jquery跨域請求php數據

時間 2019-11-12

標籤關於 jquery 請求 php 數據欄目 JQuery 简体版

原文原文鏈接

什麼引發了ajax不能跨域請求的問題？javascript

ajax自己其實是經過XMLHttpRequest對象來進行數據的交互，而瀏覽器出於安全考慮，不容許js代碼進行跨域操做，因此會警告。跨域的安全限制都是指瀏覽器端來講的，服務器端是不存在跨域安全限制的。因此針對這2種狀況衍生出2類跨域解決方案，一類是服務器端作中轉相似代理方式，一類是js處理瀏覽器端的真正跨域訪問。php

<script type="text/javascript" src="./jquery-1.6.4.min.js"></script>  
<script type="text/javascript">  
    function short(){  
        var url_long=$("#url_long").val();  
        var source=$("#source").val();  
        var request = "http://api.t.sina.com.cn/short_url/shorten.json?url_long="+url_long+"&source="+source+"&callback=?";  
        //&callback=? 必須加上，myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。jquery api 文檔上有說明。  
        $.ajax({  
            dataType: "jsonp",//跨域訪問 dataType 必須是jsonp 類型。  
            url: request,  
            type:"GET",  
            jsonp:"callback",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名(通常默認爲:callback)
            jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據
            success: function(response) {  
                $("#shortUrl").html("短地址爲："+response[0].url_short);  
            },  
             error: function(XMLHttpRequest, textStatus, errorThrown) {  
                alert("status"+XMLHttpRequest.status);  
                alert("readyState"+XMLHttpRequest.readyState);  
                alert("textstatus"+textStatus);  
                alert(errorThrown);  
            }  
        });  
        return false;  
    }  
    </script>  
});

php後端：html

ult = json_encode(array($data));
echo "flightHandler($result)";
//此處的flightHandler是上面$ajax中jsonpCallback定義的名稱,因爲jquery已經封裝好了jsonp能夠直接拿去用。
//當使用jsonp時，使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。
//有人建議此處的函數名稱能夠弄成動態獲取的，爲了實現不一樣的操做代碼範例：
$method = isset($_GET[‘method’])?trim($_GET[‘method’]):’flightHandler’;//獲取方法名稱
$result = json_encode(array($data));
echo $method ."($result)";

或者java

 print_r($_GET['callback'] . '(' . urldecode(json_encode($rs_info_arr)) . ')');

注意兩點:
1. datatype 必須爲jsonp
2.callback=? 必須加上，開始沒加上，success：function 一直沒有響應（返回了數據）。
3.charset="utf-8" 爲utf-8 ,文件的保存格式也應該是encoding utf-8 。

若是採用form 表單提交，不需考慮跨域問題。jquery

<html lang="zh" xml:lang="zh" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 meta charset="utf-8">
 <title>Tools</title>
</head>
<body >
  <div>
 歡迎使用地址轉寫工具，請輸入連接<br><br>
  <form action="http://api.t.sina.com.cn/short_url/shorten.json" method="get">
物品連接：<input type="string" name="url_long" /><br>
 
     APIkey     <input type="string" name="source" value="1681459862" /><br><br>
  <input type="submit" name="submit" value="提交" />
  </form>
  </div>
</body>