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ǔ)知識(shí)。
JSON中對(duì)象通過“{}”來標(biāo)識(shí),一個(gè)“{}”代表一個(gè)對(duì)象,如{“AreaId”:”123”},對(duì)象的值是鍵值對(duì)的形式(key:value)。
“[]”,標(biāo)識(shí)數(shù)組,數(shù)組內(nèi)部各個(gè)數(shù)據(jù)之間通過“,”分割,如[“AreaId”:”123”,”AreaId”:”345”]。
很多情況下是對(duì)象數(shù)組,那就是這樣:
[{“AreaId”:”123”},{“AreaId”:”345”}]
其實(shí)數(shù)組也是一個(gè)對(duì)象,上面的格式也可以寫成這樣:
{“Area”:[{“AreaId”:”123”},{“AreaId”:”345”}]}
這表示一個(gè)Area對(duì)象,他有兩個(gè)子數(shù)據(jù),每個(gè)子數(shù)據(jù)也是一個(gè)對(duì)象,每個(gè)子對(duì)象都是AreaId。
JSON中字符串和字符的定義格式和一般的類C語言定義是類似的,雙引號(hào)定義字符串,單引號(hào)定義字符。
JSON的鍵(Key)用雙引號(hào)括起來,比如上面的“Area“和”AreaId“,都是用雙引號(hào)括起來的,在一些語言中構(gòu)造JSON字符串的時(shí)候,可以使用轉(zhuǎn)義字符轉(zhuǎn)義雙引號(hào)。
首先給出要傳的json數(shù)據(jù):[{"demoData":"This Is The JSON Data"}]
1,使用普通的aspx頁面來處理
本人覺得這種方式處理起來是最簡(jiǎn)單的了,看下面的代碼吧
$.ajax({
type: "post",
url: "Default.aspx",
dataType: "json",
success: function (data) {
$("input#showTime").val(data[0].demoData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
這里是后臺(tái)傳遞數(shù)據(jù)的代碼
Response.Clear();
Response.Write("[{\"demoData\":\"This Is The JSON Data\"}]");
Response.Flush();
Response.End();
這種處理的方式將傳遞過來的數(shù)據(jù)直接解析為json數(shù)據(jù),也就是說這里的前臺(tái)js代碼可能直接把這些數(shù)據(jù)解析成json對(duì)象數(shù)據(jù),而并非字符串?dāng)?shù)據(jù),如data[0].demoData,
這里就直接使用了這個(gè)json對(duì)象數(shù)據(jù)
2,使用webservice(asmx)來處理這種處理方式就不會(huì)將傳遞過來的數(shù)據(jù)當(dāng)成是json對(duì)象數(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);
//這里有兩種對(duì)數(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)成了字符串來處理的,所在就要對(duì)這個(gè)數(shù)據(jù)進(jìn)行eval的處理,這樣才能成為真正的json對(duì)象數(shù)據(jù),
3,使用ashx文件來處理這種方式和普通的aspx的頁面處理是一樣的所以這里就不多做解釋了!
- 使用Jquery+Ajax+Json如何實(shí)現(xiàn)分頁顯示附JAVA+JQuery實(shí)現(xiàn)異步分頁
- jQuery通過Ajax向PHP服務(wù)端發(fā)送請(qǐng)求并返回JSON數(shù)據(jù)
- JQuery ajax 返回json時(shí)出現(xiàn)中文亂碼該如何解決
- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- 詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
- Json2Template.js 基于jquery的插件 綁定JavaScript對(duì)象到Html模板中
- 基于jQuery的AJAX和JSON實(shí)現(xiàn)純html數(shù)據(jù)模板
相關(guān)文章
深入淺析Nginx實(shí)現(xiàn)AJAX跨域請(qǐng)求問題
AJAX從一個(gè)域請(qǐng)求另一個(gè)域會(huì)有跨域的問題。那么如何在nginx上實(shí)現(xiàn)ajax跨域請(qǐng)求呢?此問題難住很多朋友,下面小編給大家?guī)砹薔ginx實(shí)現(xiàn)AJAX跨域請(qǐng)求問題的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-06-06
Ajax刪除數(shù)據(jù)與查看數(shù)據(jù)操作
這篇文章主要介紹了Ajax刪除數(shù)據(jù)與查看數(shù)據(jù)操作,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
ajax與websocket的區(qū)別以及websocket常用使用方式 介紹
這篇文章主要介紹了ajax與websocket的區(qū)別以及websocket常用使用方式 介紹,需要的朋友可以參考下2018-06-06

