jQuery解析Json實例詳解
本文實例講述了jQuery解析Json的方法。分享給大家供大家參考,具體如下:
前言
在WEB數(shù)據(jù)傳輸過程中,json是以文本,即字符串的輕量級形式傳遞的,而客戶端一般用JS操作的是接收到的JSON對象,所以,JSON對象和JSON字符串之間的相互轉(zhuǎn)換、JSON數(shù)據(jù)的解析是關(guān)鍵。
先明確2個概念例如:
JSON字符串:
JSON對象:
可以簡單這樣理解:
JSON對象是直接可以使用JQuery操作的格式,如C#中可以用對象(類名)點出屬性(方法)一樣;
JSON字符串僅僅只是一個字符串,一個整體,不截取的話沒辦法取出其中存儲的數(shù)據(jù),不能直接使用,除非你只想alert()他;
一、JSON字符串轉(zhuǎn)換為JSON對象
要使用上面的str1,必須使用下面的方法先轉(zhuǎn)化為JSON對象:
A:eval函數(shù)
eval函數(shù)可以直接將本質(zhì)符合或者近似符合JSON格式的字符串轉(zhuǎn)換為JSON對象,使用方式如:
eval('(' + str + ')'); //其中str就是滿足本標(biāo)題描述的字符串
//由JSON字符串轉(zhuǎn)換為JSON對象 var str='{ "name": "John" }'; var obj = eval('(' + str + ')'); alert( obj.name); var str2="{ 'name': 'John' }"; var obj2 = eval('(' + str2 + ')'); alert( obj2.name); var str3="{ name: 'John' }"; var obj3 = eval('(' + str3 + ')'); alert( obj3.name);
以上均會輸出結(jié)果“john”。
Eval方式可以轉(zhuǎn)換以下標(biāo)準(zhǔn)和非標(biāo)準(zhǔn)格式字符串:
var str="{ 'name': 'John' }"; var str2='{ "name": "John" }'; var str3="{ name: 'John' }";
參見本例下載包中:JqueryDemo1.html
B:parseJSON函數(shù)
另一種將標(biāo)準(zhǔn)字符串轉(zhuǎn)換為JSON對象的函數(shù)是parseJSON(),使用方式如jQuery.parseJSON(str)//其中str就是滿足本標(biāo)題描述的字符串
//由JSON字符串轉(zhuǎn)換為JSON對象 var str='{ "name": "John" }'; var obj = jQuery.parseJSON(str) alert("1"+ obj.name);
以上均會輸出結(jié)果“john”。
此種方式僅支持標(biāo)準(zhǔn)格式:var str='{ "name": "John" }';
參見本例下載包中:JqueryDemo2.html
C:JSON.parse函數(shù)
還有一種將標(biāo)準(zhǔn)字符串轉(zhuǎn)換為JSON對象的函數(shù)是JSON.parse(),使用方式如JSON.parse(str)//其中str就是滿足本標(biāo)題描述的字符串
var str = '{ "name": "mady", "age": "24" }'; var obj = JSON.parse(str); alert(obj.name);
以上均會輸出結(jié)果“john”。
此種方式僅支持標(biāo)準(zhǔn)格式:var str='{ "name": "John" }';
參見本例下載包中:JqueryDemo3.html
以上結(jié)果一致,均輸出姓名,如下圖:
特別注意:如果obj本來就是一個JSON對象,那么使用eval()函數(shù)轉(zhuǎn)換后(哪怕是多次轉(zhuǎn)換)還是JSON對象,但是使用parseJSON()函數(shù)處理后會有問題(拋出語法異常)。
D:Other方式
如果忍不住想犯錯,十分十分想解析非標(biāo)準(zhǔn)、非正規(guī)字符串,如:
或者
以及其他的你能想到的各種本質(zhì)正確的非法格式,那么有擴(kuò)展庫可以解決
jquery-json 擴(kuò)展庫
下載地址在這里:http://code.google.com/p/jquery-json/
這個庫用來擴(kuò)展 jQuery ,對于 JSON 的使用,擴(kuò)展了兩個函數(shù):toJSON和parseJSON
toJSON 函數(shù)用來將一個普通的 JavaScript 對象序列化為 JSON 對象。
parseJSON函數(shù)用來將一個普通的 JavaScript 對象序列化為 JSON 對象too。
var data=$.toJSON({ x: 2, y: 3 }); var obj = jQuery.parseJSON(data); alert(obj.x); var str = {plugin: 'jquery-json', version: 2.3}; var data2=$.toJSON(str); var obj2 = jQuery.parseJSON(data2); alert(obj2.plugin);
以上代碼執(zhí)行結(jié)果如:
參見本例下載包中:JqueryDemo5.html
二、將JSON對象轉(zhuǎn)換為字符串
可以使用toJSONString()或者全局方法JSON.stringify()將JSON對象轉(zhuǎn)化為JSON字符串。
例如:
或者
var last=JSON.stringify(obj); //將JSON對象轉(zhuǎn)化為JSON字符 alert(last);
三、解析讀取JSON
我們通過各種方式將字符串轉(zhuǎn)換為JSON對象后就是解析他了。
如上面的例子:
就可以這樣讀取:
彈出” mady”。
我們遇到的JSON很少有這么簡單的,比如復(fù)雜一點的JSON對象如:
解析用:
alert(str.GetUserPostByIdResult.Name);//一次點不出來,我多點幾次
彈出:”mady”。
再再復(fù)雜一點的如:
如果你想單挑的話,解析用:
彈出:“6200”。
如果你想群挑的話,解析用:
$.each(dataObj.root, function(index, item) { $("#info").append( "<div>" +index+":"+ item.name + "</div>" + "<div>" +index+":"+ item.value + "</div><hr/>"); });
其中這個“#info”是個DIV的ID。輸入結(jié)果如下圖:
參見本例下載包中:JqueryDemo4.html
注意:本例如果要使用其他轉(zhuǎn)換函數(shù)請更改字符串內(nèi)單引號為雙引號,外引號為單引號。
本文完整實例代碼代碼點擊此處本站下載。
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery eval解析JSON中的注意點介紹
- jQuery怎么解析Json字符串(Json格式/Json對象)
- js/jquery解析json和數(shù)組格式的方法詳解
- jquery解析json格式數(shù)據(jù)的方法(對象、字符串)
- Jquery解析json字符串及json數(shù)組的方法
- Jquery解析json數(shù)據(jù)詳解
- jQuery解析json數(shù)據(jù)實例分析
- jQuery解析json格式數(shù)據(jù)簡單實例
- 深入分析jquery解析json數(shù)據(jù)
- Jquery解析Json格式數(shù)據(jù)過程代碼
- jQuery解析json格式數(shù)據(jù)示例
相關(guān)文章
JQuery 引發(fā)兩次$(document.ready)事件
ASP.net MVC 做了個工程,不知道為什么Search按就總是執(zhí)行兩次。2010-01-01jQuery實現(xiàn)的Email中的收件人效果(按del鍵刪除)
基于jquery實現(xiàn)的Email中的收件人效果,可通過del鍵刪除,需要的朋友可以參考下。2011-03-03jquery實現(xiàn)點擊其他區(qū)域時隱藏下拉div和遮罩層的方法
這篇文章主要介紹了jquery實現(xiàn)點擊其他區(qū)域時隱藏下拉div和遮罩層的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)改變頁面元素樣式的功能,需要的朋友可以參考下2015-12-12jQuery Dialog 打開時自動聚焦的解決方法(兩種方法)
這篇文章主要介紹了jQuery Dialog 打開時自動聚焦的解決方法,及jquery dialog打開時,自動聚焦在第一個控件上的方法,對jquery dialog相關(guān)知識感興趣的朋友通過本文一起學(xué)習(xí)吧2016-11-11jquery中常用的SET和GET$(”#msg”).html循環(huán)介紹
jquery中常用的SET和GET$(”#msg”).html循環(huán)想必大家并不陌生吧,本文整理了一些,感興趣的朋友可以參考下2013-10-10