Jquery跨域獲得Json的簡單實(shí)例
這兩天用 Jquery 跨域取數(shù)據(jù)的時(shí)候,經(jīng)常碰到 invalid label 這個(gè)錯(cuò)誤,十分的郁悶,老是取不到服務(wù)器端發(fā)送回來的 json 值,
一般跨域用到的兩個(gè)方法為:$.ajax 和$.getJSON
最后,仔細(xì)安靜下來,細(xì)讀 json 官方文檔后發(fā)現(xiàn)這么一段:
JSON數(shù)據(jù)是一種能很方便通過JavaScript解析的結(jié)構(gòu)化數(shù)據(jù)。如果獲取的數(shù)據(jù)文件存放在遠(yuǎn)程服務(wù)器上(域名不同,也就是跨域獲取數(shù)據(jù)),則需要使用jsonp類型。使用這種類型的話,會創(chuàng)建一個(gè)查詢字符串參數(shù) callback=? ,這個(gè)參數(shù)會加在請求的URL后面。服務(wù)器端應(yīng)當(dāng)在JSON數(shù)據(jù)前加上回調(diào)函數(shù)名,以便完成一個(gè)有效的JSONP請求。如果要指定回調(diào)函數(shù)的參數(shù)名來取代默認(rèn)的callback,可以通過設(shè)置$.ajax()的jsonp參數(shù)。
其實(shí)jquery跨域的原理是通過外鏈 <script> 來實(shí)現(xiàn)的,然后在通過回調(diào)函數(shù)加上回調(diào)函數(shù)的參數(shù)來實(shí)現(xiàn)真正的跨域
Jquery 在每次跨域發(fā)送請求時(shí)都會有callback這個(gè)參數(shù),其實(shí)這個(gè)參數(shù)的值就是回調(diào)函數(shù)名稱,所以,服務(wù)器端在發(fā)送json數(shù)據(jù)時(shí),應(yīng)該把這個(gè)參數(shù)放到前面,這個(gè)參數(shù)的值往往是隨機(jī)生成的,如:jsonp1294734708682,同時(shí)也可以通過 $.ajax 方法設(shè)置 callback 方法的名稱。明白了原理后,服務(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ù)
下面我們來開始實(shí)例
假如正常返回的數(shù)據(jù):
{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }
下面我們來介紹下jquery的自己個(gè)參數(shù)
/** *@dataType (String) *"xml": 返回 XML 文檔,可用 jQuery 處理。 *"html": 返回純文本 HTML 信息;包含的script標(biāo)簽會在插入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請求中重寫回調(diào)函數(shù)的名字。 *這個(gè)值用來替代在"callback=?"這種GET或POST請求中URL參數(shù)里的"callback"部分, *比如{jsonp:'onJsonPLoad'}會導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。 */ /** *@jsonpCallback (String) *為jsonp請求指定一個(gè)回調(diào)函數(shù)名。這個(gè)值將用來取代jQuery自動(dòng)生成的隨機(jī)函數(shù)名。 *這主要用來讓jQuery生成度獨(dú)特的函數(shù)名,這樣管理請求更容易,也能方便地提供回調(diào)函數(shù)和錯(cuò)誤處理。 *你也可以在想讓瀏覽器緩存GET請求的時(shí)候,指定這個(gè)回調(diào)函數(shù)名。 */
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>'); }); } });
服務(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名稱,和返回函數(shù)名稱的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名稱,不指定返回函數(shù)名稱的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=? 起什么作用了?原來 jsoncallback=? 被替換后,會把方法名稱傳給服務(wù)器。 *我們在服務(wù)器端要做什么工作呢?服務(wù)器要接受參數(shù) jsoncallback ,然后把 jsoncallback 的值作為 JSON 數(shù)據(jù)方法名稱返回 . */ $.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的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-06-06jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹,使用jQuery EasyUI的朋友可以參考下。2011-10-10JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
JQuery在IE8兼容性視圖模式下操作Select的Options的Bug在本文進(jìn)行重現(xiàn)并給出詳細(xì)的解決方法,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04jQuery插件jsonview展示json數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery插件jsonview展示json數(shù)據(jù)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05jquery tools之tabs 選項(xiàng)卡/頁簽
jquery用這么久了,覺得雖然沒ExtJS等框架全面,功能強(qiáng)大,但是也確實(shí)做到了“the write less,do more”,而且學(xué)起來也方便,只需要仔細(xì)研讀一下它官方網(wǎng)站的API Reference,操作起來基本問題不是太大。2009-07-07