天天看點

Jquery跨域獲得Json

這兩天用 Jquery 跨域取資料的時候,經常碰到 invalid label 這個錯誤,十分的郁悶,老是取不到伺服器端發送回來的 json 值,

一般跨域用到的兩個方法為:$.ajax 和$.getJSON

最後,仔細安靜下來,細讀 json 官方文檔後發現這麼一段:

JSON資料是一種能很友善通過JavaScript解析的結構化資料。如果擷取的資料檔案存放在遠端伺服器上(域名不同,也就是跨域擷取資料),則需要使用jsonp類型。使用這種類型的話,會建立一個查詢字元串參數 callback=? ,這個參數會加在請求的URL後面。伺服器端應當在JSON資料前加上回調函數名,以便完成一個有效的JSONP請求。如果要指定回調函數的參數名來取代預設的callback,可以通過設定$.ajax()的jsonp參數。

其實jquery跨域的原理是通過外鍊 <script>  來實作的,然後在通過回調函數加上回調函數的參數來實作真正的跨域

Jquery 在每次跨域發送請求時都會有callback這個參數,其實這個參數的值就是回調函數名稱,是以,伺服器端在發送json資料時,應該把這個參數放到前面,這個參數的值往往是随機生成的,如:jsonp1294734708682,同時也可以通過 $.ajax 方法設定 callback 方法的名稱。明白了原理後,伺服器端應該這樣發送資料:

這樣,json 資料 {\"userid\":0,\"username\":\"null\"} 就作為了 jsonp1294734708682 回調函數的一個參數

下面我們來開始執行個體

假如正常傳回的資料:

下面我們來介紹下jquery的自己個參數

Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json

 1不指定jsonp的名稱、

Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json

伺服器需要這樣傳回資料示例:

2指定jsonp名稱,和傳回函數名稱的function、

Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json

  伺服器需要這樣傳回資料示例:

3指定jsonp名稱,不指定傳回函數名稱的function、

Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json

伺服器需要這樣傳回資料示例: 

4使用getJSON()擷取資料、

Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json
Jquery跨域獲得Json

本文轉自左正部落格園部落格,原文連結:http://www.cnblogs.com/soundcode/p/4525614.html,如需轉載請自行聯系原作者

繼續閱讀