JQuery ajax返回JSON時(shí)的處理方式 (三種方式)
最近在使用JQuery的ajax方法時(shí),要求返回的數(shù)據(jù)為json數(shù)據(jù),在處理的過程中遇到下面的幾個(gè)問題,那就是采用不同的方式來生成json數(shù)據(jù)的時(shí)候,在$.ajax方法中應(yīng)該是如何來處理的,下面依次來進(jìn)行說明,由于本人使用的是asp.net,所以處理的頁面都是采用.net來做的!其他的方式應(yīng)該是相同的吧
一、JSON的一些基礎(chǔ)知識。
JSON中對象通過“{}”來標(biāo)識,一個(gè)“{}”代表一個(gè)對象,如{“AreaId”:”123”},對象的值是鍵值對的形式(key:value)。
“[]”,標(biāo)識數(shù)組,數(shù)組內(nèi)部各個(gè)數(shù)據(jù)之間通過“,”分割,如[“AreaId”:”123”,”AreaId”:”345”]。
很多情況下是對象數(shù)組,那就是這樣:
[{“AreaId”:”123”},{“AreaId”:”345”}]
其實(shí)數(shù)組也是一個(gè)對象,上面的格式也可以寫成這樣:
{“Area”:[{“AreaId”:”123”},{“AreaId”:”345”}]}
這表示一個(gè)Area對象,他有兩個(gè)子數(shù)據(jù),每個(gè)子數(shù)據(jù)也是一個(gè)對象,每個(gè)子對象都是AreaId。
JSON中字符串和字符的定義格式和一般的類C語言定義是類似的,雙引號定義字符串,單引號定義字符。
JSON的鍵(Key)用雙引號括起來,比如上面的“Area“和”AreaId“,都是用雙引號括起來的,在一些語言中構(gòu)造JSON字符串的時(shí)候,可以使用轉(zhuǎn)義字符轉(zhuǎn)義雙引號。
首先給出要傳的json數(shù)據(jù):[{"demoData":"This Is The JSON Data"}]
1,使用普通的aspx頁面來處理
本人覺得這種方式處理起來是最簡單的了,看下面的代碼吧
$.ajax({ type: "post", url: "Default.aspx", dataType: "json", success: function (data) { $("input#showTime").val(data[0].demoData); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });
這里是后臺傳遞數(shù)據(jù)的代碼
Response.Clear(); Response.Write("[{\"demoData\":\"This Is The JSON Data\"}]"); Response.Flush(); Response.End();
這種處理的方式將傳遞過來的數(shù)據(jù)直接解析為json數(shù)據(jù),也就是說這里的前臺js代碼可能直接把這些數(shù)據(jù)解析成json對象數(shù)據(jù),而并非字符串?dāng)?shù)據(jù),如data[0].demoData,
這里就直接使用了這個(gè)json對象數(shù)據(jù)
2,使用webservice(asmx)來處理這種處理方式就不會將傳遞過來的數(shù)據(jù)當(dāng)成是json對象數(shù)據(jù),而是作為字符串來處理的,如下代碼
$.ajax({ type: "post", url: "JqueryCSMethodForm.asmx/GetDemoData", dataType: "json",/*這句可用可不用,沒有影響*/ contentType: "application/json; charset=utf-8", success: function (data) { $("input#showTime").val(eval('(' + data.d + ')')[0].demoData); //這里有兩種對數(shù)據(jù)的轉(zhuǎn)換方式,兩處理方式的效果一樣//$("input#showTime").val(eval(data.d)[0].demoData); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });
下面這里為asmx的方法代碼[WebMethod]
public static string GetDemoData() { return "[{\"demoData\":\"This Is The JSON Data\"}]"; }
這里的這種處理方式就把傳遞回來的json數(shù)據(jù)當(dāng)成了字符串來處理的,所在就要對這個(gè)數(shù)據(jù)進(jìn)行eval的處理,這樣才能成為真正的json對象數(shù)據(jù),
3,使用ashx文件來處理這種方式和普通的aspx的頁面處理是一樣的所以這里就不多做解釋了!
- 使用Jquery+Ajax+Json如何實(shí)現(xiàn)分頁顯示附JAVA+JQuery實(shí)現(xiàn)異步分頁
- jQuery通過Ajax向PHP服務(wù)端發(fā)送請求并返回JSON數(shù)據(jù)
- JQuery ajax 返回json時(shí)出現(xiàn)中文亂碼該如何解決
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- 詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
- Json2Template.js 基于jquery的插件 綁定JavaScript對象到Html模板中
- 基于jQuery的AJAX和JSON實(shí)現(xiàn)純html數(shù)據(jù)模板
相關(guān)文章
JQuery+Ajax+Struts2+Hibernate框架整合實(shí)現(xiàn)完整的登錄注冊
最近沒有項(xiàng)目做,閑著沒事,看到一個(gè)書城的網(wǎng)站很好,于是就是仿了一個(gè),把里面的ui直接拿過來用,前端后端自己寫的,目前大部分的功能已經(jīng)實(shí)現(xiàn)了。2015-10-10用AJAX實(shí)現(xiàn)的無刷新的分頁實(shí)現(xiàn)代碼(asp.net)
最近學(xué)習(xí)了AJAX技術(shù)。AJAX,指的是異步的Javascript和xml。它的基本原理就是頁面用Javascript發(fā)送一個(gè)異步的http請求到服務(wù)器,服務(wù)器返回?cái)?shù)據(jù)后,再用Javascript靜態(tài)的去更改頁面某個(gè)地方的值,而無需提交表單。2011-04-04Ajax學(xué)習(xí)全套(最全最經(jīng)典)
ajax是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。這篇文章主要介紹了Ajax學(xué)習(xí)全套(最全最經(jīng)典)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08JavaScript實(shí)現(xiàn)Ajax總結(jié)
ajax應(yīng)用非常普及,ajax的優(yōu)點(diǎn)大家都知道,具體就不多說了,其缺點(diǎn)還真不少,比如破壞瀏覽器的back功能,同一個(gè)url打開的界面并不是完全相同,還有安全性能等方面,至于有這么多的缺點(diǎn),也阻止不了大家使用ajax的步伐,下文給大家分享javascript實(shí)現(xiàn)ajax小結(jié)吧2015-10-10Ajax實(shí)現(xiàn)彈出式無刷新城市選擇功能代碼
這篇文章主要介紹了Ajax實(shí)現(xiàn)彈出式無刷新城市選擇功能代碼,實(shí)例分析了Ajax彈出窗口及無刷新選擇數(shù)據(jù)項(xiàng)的相關(guān)技巧,需要的朋友可以參考下2015-08-08利用AJAX開源項(xiàng)目 在網(wǎng)頁里播放視頻實(shí)現(xiàn)方法
下載videobox 1.1.zip把它解壓到asp.net項(xiàng)目的目錄下,并用“Add New Item”新建一個(gè)Html文件用以播放視頻。2008-11-11AJAX實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了AJAX實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10