Jquery跨域獲得Json的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年05月18日 10:07:23 投稿：jingxian

下面小編就為大家?guī)?lái)一篇Jquery跨域獲得Json的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

這兩天用 Jquery 跨域取數(shù)據(jù)的時(shí)候，經(jīng)常碰到 invalid label 這個(gè)錯(cuò)誤，十分的郁悶，老是取不到服務(wù)器端發(fā)送回來(lái)的 json 值，

一般跨域用到的兩個(gè)方法為：$.ajax 和$.getJSON

最后，仔細(xì)安靜下來(lái)，細(xì)讀 json 官方文檔后發(fā)現(xiàn)這么一段：

JSON數(shù)據(jù)是一種能很方便通過(guò)JavaScript解析的結(jié)構(gòu)化數(shù)據(jù)。如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上（域名不同，也就是跨域獲取數(shù)據(jù)），則需要使用jsonp類(lèi)型。使用這種類(lèi)型的話，會(huì)創(chuàng)建一個(gè)查詢(xún)字符串參數(shù) callback=? ，這個(gè)參數(shù)會(huì)加在請(qǐng)求的URL后面。服務(wù)器端應(yīng)當(dāng)在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名，以便完成一個(gè)有效的JSONP請(qǐng)求。如果要指定回調(diào)函數(shù)的參數(shù)名來(lái)取代默認(rèn)的callback，可以通過(guò)設(shè)置$.ajax()的jsonp參數(shù)。

其實(shí)jquery跨域的原理是通過(guò)外鏈 <script> 來(lái)實(shí)現(xiàn)的,然后在通過(guò)回調(diào)函數(shù)加上回調(diào)函數(shù)的參數(shù)來(lái)實(shí)現(xiàn)真正的跨域

Jquery 在每次跨域發(fā)送請(qǐng)求時(shí)都會(huì)有callback這個(gè)參數(shù)，其實(shí)這個(gè)參數(shù)的值就是回調(diào)函數(shù)名稱(chēng)，所以，服務(wù)器端在發(fā)送json數(shù)據(jù)時(shí)，應(yīng)該把這個(gè)參數(shù)放到前面，這個(gè)參數(shù)的值往往是隨機(jī)生成的，如：jsonp1294734708682，同時(shí)也可以通過(guò) $.ajax 方法設(shè)置 callback 方法的名稱(chēng)。明白了原理后，服務(wù)器端應(yīng)該這樣發(fā)送數(shù)據(jù)：

string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";

這樣，json 數(shù)據(jù) {\"userid\":0,\"username\":\"null\"} 就作為了 jsonp1294734708682 回調(diào)函數(shù)的一個(gè)參數(shù)

下面我們來(lái)開(kāi)始實(shí)例

假如正常返回的數(shù)據(jù):

{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }

下面我們來(lái)介紹下jquery的自己個(gè)參數(shù)

/**
*@dataType (String) 
*"xml": 返回 XML 文檔，可用 jQuery 處理。
*"html": 返回純文本 HTML 信息；包含的script標(biāo)簽會(huì)在插入dom時(shí)執(zhí)行。
*"script": 返回純文本 JavaScript 代碼。"json": 返回 JSON 數(shù)據(jù) 。
*"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時(shí)，如 "myurl?callback=?" jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
*"text": 返回純文本字符串
*/

/**
*@jsonp (String)在一個(gè)jsonp請(qǐng)求中重寫(xiě)回調(diào)函數(shù)的名字。
*這個(gè)值用來(lái)替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分，
*比如{jsonp:'onJsonPLoad'}會(huì)導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。
*/


/**
*@jsonpCallback (String)
*為jsonp請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。這個(gè)值將用來(lái)取代jQuery自動(dòng)生成的隨機(jī)函數(shù)名。
*這主要用來(lái)讓jQuery生成度獨(dú)特的函數(shù)名，這樣管理請(qǐng)求更容易，也能方便地提供回調(diào)函數(shù)和錯(cuò)誤處理。
*你也可以在想讓瀏覽器緩存GET請(qǐng)求的時(shí)候，指定這個(gè)回調(diào)函數(shù)名。
*/

1不指定jsonp的名稱(chēng)、

$.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>');
    });
  }
});

服務(wù)器需要這樣返回?cái)?shù)據(jù)示例:

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名稱(chēng)，和返回函數(shù)名稱(chēng)的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>');
  });
}

服務(wù)器需要這樣返回?cái)?shù)據(jù)示例:

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名稱(chēng)，不指定返回函數(shù)名稱(chēng)的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>');
    });
  }
});

服務(wù)器需要這樣返回?cái)?shù)據(jù)示例:

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()獲取數(shù)據(jù)、

/**
*注意：
*這里調(diào)用的地址中jsoncallback=? 是關(guān)鍵的所在！其中我們關(guān)心的是 jsoncallback=? 起什么作用了？原來(lái) jsoncallback=? 被替換后，會(huì)把方法名稱(chēng)傳給服務(wù)器。
*我們?cè)诜?wù)器端要做什么工作呢？服務(wù)器要接受參數(shù) jsoncallback ，然后把 jsoncallback 的值作為 JSON 數(shù)據(jù)方法名稱(chēng)返回 .
*/
$.getJSON("http://192.168.20.86/friend/getMyJsonData.aspx?jsoncallback=?", function (data) {
  $.each(data.success, function (i, item) {
    $("body").append('<h1>' + item.title + '</h1>');
  });
});

服務(wù)器需要這樣返回?cái)?shù)據(jù)示例:

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的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: