Jquery跨域取得Json方式方法

這次帶給大家Jquery跨域獲得Json方式方法，Jquery跨域獲得Json的 注意事項 有哪些，下面就是實戰案例，一起來看一下。

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

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

#最後，仔細安靜下來，細讀json 官方文件後發現這麼一段：

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

其實jquery跨域的原理是透過外鏈 來實現的,然後在透過回呼函數加上回呼函數的參數來實現真正的跨域

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(' ' + item.title + ' '); }); } }); 伺服器需要這樣傳回資料範例:

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(' ' + item.title + ' '); }); } 伺服器需要這樣傳回數據範例:

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(' ' + item.title + ' '); }); } }); 伺服器需要這樣傳回資料範例:

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(' ' + item.title + ' '); }); }); 伺服器需要這樣返回資料範例:

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\"}] }"); 相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！