這兩天用 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 方法的名稱。明白了原理后，服務器端應該這樣發送數據：
string message = "jsonp1294734708682({/"userid/":0,/"username/":/"null/"})";這樣，json 數據 {/"userid/":0,/"username/":/"null/"} 就作為了 jsonp1294734708682 回調函數的一個參數
下面我們來開始實例
假如正常返回的數據:
{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }下面我們來介紹下jquery的自己個參數
/***@dataType (String) *"xml": 返回 XML 文檔，可用 jQuery 處理。*"html": 返回純文本 HTML 信息；包含的script標簽會在插入dom時執行。*"script": 返回純文本 JavaScript 代碼。"json": 返回 JSON 數據 。*"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。*"text": 返回純文本字符串*//***@jsonp (String)在一個jsonp請求中重寫回調函數的名字。*這個值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，*比如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。*//***@jsonpCallback (String)*為jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。*這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。*你也可以在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。*/1不指定jsonp的名稱、
$.ajax({ url: 'http://lifeloopdev.info/get_events', dataType: "jsonp", data: "offset=0&num_items=10", username: 'username', password: 'password', success: function (data) { $.each(data.success, function (i, item) { $("body").append('<h1>' + item.title + '</h1>'); }); }});服務器需要這樣返回數據示例:
Response.ContentType="text/html; charset=utf-8";String callback = Request.QueryString["callback"].ToString();Response.Write(callback + "{ /"success/": [{ /"id/": 1, /"title/": /"title 1/" }, { /"id/": 2, /"title/": /"title 2/" }, { /"id/": 3, /"title/": /"title 3/"}] }");2指定jsonp名稱，和返回函數名稱的function、
//這里我們自己指定了jsonp的callback的名字$.ajax({ url: 'http://lifeloopdev.info/get_events', dataType: "jsonp", data: "offset=0&num_items=10", username: 'username', password: 'password', jsonp: "successCallback", jsonpCallback: 'successCallback'});function successCallback(data) { $.each(data.success, function (i, item) { $("body").append('<h1>' + item.title + '</h1>'); });}服務器需要這樣返回數據示例:
Response.ContentType="text/html; charset=utf-8";String callback = Request.QueryString["successCallback"].ToString();Response.Write(callback + "{ /"success/": [{ /"id/": 1, /"title/": /"title 1/" }, { /"id/": 2, /"title/": /"title 2/" }, { /"id/": 3, /"title/": /"title 3/"}] }");3指定jsonp名稱，不指定返回函數名稱的function、
$.ajax({ url: 'http://lifeloopdev.info/get_events', dataType: "jsonp", data: "offset=0&num_items=10", username: 'username', password: 'password', jsonp: "successCallback", success: function (data) { $.each(data.success, function (i, item) { $("body").append('<h1>' + item.title + '</h1>'); }); }});服務器需要這樣返回數據示例:
Response.ContentType="text/html; charset=utf-8";String callback = Request.QueryString["successCallback"].ToString();Response.Write(callback + "{ /"success/": [{ /"id/": 1, /"title/": /"title 1/" }, { /"id/": 2, /"title/": /"title 2/" }, { /"id/": 3, /"title/": /"title 3/"}] }");4使用getJSON()獲取數據、
/***注意：*這里調用的地址中jsoncallback=? 是關鍵的所在！其中我們關心的是 jsoncallback=? 起什么作用了？原來 jsoncallback=? 被替換后，會把方法名稱傳給服務器。*我們在服務器端要做什么工作呢？服務器要接受參數 jsoncallback ，然后把 jsoncallback 的值作為 JSON 數據方法名稱返回 .*/$.getJSON("http://192.168.20.86/friend/getMyJsonData.aspx?jsoncallback=?", function (data) { $.each(data.success, function (i, item) { $("body").append('<h1>' + item.title + '</h1>'); });});服務器需要這樣返回數據示例:
Response.ContentType="text/html; charset=utf-8";String callback = Request.QueryString["jsoncallback"].ToString();Response.Write(callback + "{ /"success/": [{ /"id/": 1, /"title/": /"title 1/" }, { /"id/": 2, /"title/": /"title 2/" }, { /"id/": 3, /"title/": /"title 3/"}] }");以上這篇Jquery跨域獲得Json的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
