JQuery 解析多維的Json數(shù)據(jù)格式
更新時(shí)間：2009年11月02日 14:00:05 作者：
對博客系統(tǒng)已經(jīng)做到了博客評論模塊部分了，對單篇博文進(jìn)行靜態(tài)化的同時(shí)對博文的評論部分采取AJAX的方式去讀取。
這就要利用到JQuery，ASHX以及Json來合作了。一篇文章有多個(gè)評論，每十個(gè)為一頁。用戶每點(diǎn)擊下一頁則自動(dòng)抓去下一頁，這個(gè)過程采用無刷新放心進(jìn)行。
Json格式其實(shí)和表格式有異曲同工之妙，在網(wǎng)絡(luò)傳輸中，它比XML還省流量，而且與JS有更好的融合，更容易被解析。Json格式樣例如下：
{"Products":[
{"orderid":"11077","customerid":"RATTC"},
{"orderid":"11078","customerid":"RATT"}
],
"Img":[{"id":"12345","url"
:"image/1.jpg"}
]}
其中Products和Img我們可以認(rèn)為是一張表的表名。在Products表中，orderid和customerid都是Products的字段，11077與RATTC可以理解為對應(yīng)字段的值。Img部分也是一樣。所以，上面Products存在兩筆記錄，而Img存在一筆記錄而已。
那么我們怎么樣在JQuery里面進(jìn)行解析出相應(yīng)的表，欄位和值呢？
在JQuery里面我們可以用：
var Products= Json.Products;
來獲得對Products表的篩選。接下來我們就對Products進(jìn)行循環(huán)讀取值：
$.each(Products, function(i, n) {
str += "<p id='xuhao'>" + n.orderid+ "ID" + n.customerid + "</p>";
});
$.each(Products, function(i, n) {} 這里的Products就是我們的目標(biāo)Json數(shù)據(jù)中的表了了。i代表記錄的順序，從0開始（0代表第一筆，1代表第二筆...），而n就代表對應(yīng)字段的值了。 對Img的讀取也是類似~~
如有不當(dāng)之處請指正，謝謝??！
Json格式其實(shí)和表格式有異曲同工之妙，在網(wǎng)絡(luò)傳輸中，它比XML還省流量，而且與JS有更好的融合，更容易被解析。Json格式樣例如下：
復(fù)制代碼 代碼如下:
{"Products":[
{"orderid":"11077","customerid":"RATTC"},
{"orderid":"11078","customerid":"RATT"}
],
"Img":[{"id":"12345","url"
:"image/1.jpg"}
]}
其中Products和Img我們可以認(rèn)為是一張表的表名。在Products表中，orderid和customerid都是Products的字段，11077與RATTC可以理解為對應(yīng)字段的值。Img部分也是一樣。所以，上面Products存在兩筆記錄，而Img存在一筆記錄而已。
那么我們怎么樣在JQuery里面進(jìn)行解析出相應(yīng)的表，欄位和值呢？
在JQuery里面我們可以用：
var Products= Json.Products;
來獲得對Products表的篩選。接下來我們就對Products進(jìn)行循環(huán)讀取值：
復(fù)制代碼 代碼如下:
$.each(Products, function(i, n) {
str += "<p id='xuhao'>" + n.orderid+ "ID" + n.customerid + "</p>";
});
$.each(Products, function(i, n) {} 這里的Products就是我們的目標(biāo)Json數(shù)據(jù)中的表了了。i代表記錄的順序，從0開始（0代表第一筆，1代表第二筆...），而n就代表對應(yīng)字段的值了。 對Img的讀取也是類似~~
如有不當(dāng)之處請指正，謝謝??！
您可能感興趣的文章:
- JSON 數(shù)據(jù)格式詳解
- JSON 數(shù)據(jù)格式介紹
- 基于JSON數(shù)據(jù)格式詳解
- Json對象與Json字符串互轉(zhuǎn)(4種轉(zhuǎn)換方式)
- js 將json字符串轉(zhuǎn)換為json對象的方法解析
- 解析JSON對象與字符串之間的相互轉(zhuǎn)換
- JS對象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
- JavaScript中json對象和string對象之間相互轉(zhuǎn)化
- JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
- js實(shí)現(xiàn)數(shù)組轉(zhuǎn)換成json
- json對象與數(shù)組以及轉(zhuǎn)換成js對象的簡單實(shí)現(xiàn)方法
- json數(shù)據(jù)格式常見操作示例
相關(guān)文章
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
最近網(wǎng)站改版，原來的js都是原生js，因?yàn)楫?dāng)前比較jquery而且他的組件也比較多，使用方便，所以我們也采用了jquery但跟原來的$(id)沖突，經(jīng)過網(wǎng)絡(luò)很多人的推薦我們選擇了這個(gè)方法2014-06-06
這篇文章主要介紹了jQuery操作元素追加內(nèi)容,結(jié)合完整實(shí)例形式分析了jquery頁面元素追加相關(guān)操作方法,包括append、appendTo、prepend、prependTo等方法使用技巧,需要的朋友可以參考下2020-01-01
jquery實(shí)現(xiàn)紅色豎向多級向右展開的導(dǎo)航菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)紅色豎向多級向右展開的導(dǎo)航菜單效果,涉及jquery鼠標(biāo)hover事件結(jié)合class樣式動(dòng)態(tài)添加與刪除的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jQuery控制文本框只能輸入數(shù)字和字母及使用方法
這篇文章主要介紹了jQuery控制文本框只能輸入數(shù)字和字母及使用方法的相關(guān)資料，非常不錯(cuò)而且實(shí)用性也很高,需要的朋友可以參考下2016-05-05
使用Browserify配合jQuery進(jìn)行編程的超級指南
這篇文章主要介紹了使用Browserify配合jQuery進(jìn)行編程的超級指南,Browserify 可以讓你使用類似于node的require()的方式來組織瀏覽器端的JavaScript代碼,需要的朋友可以參考下2015-07-07
本文給大家介紹jquery ui tabs的理解,包括屬性、事件、方法和技巧等相關(guān)知識(shí)，對jquery ui tabs感興趣的朋友一起學(xué)習(xí)吧2015-11-11
使用jquery插件實(shí)現(xiàn)圖片延遲加載技術(shù)詳細(xì)說明
有時(shí)我們看到一些大型網(wǎng)站，頁面如果有很多圖片的時(shí)候，當(dāng)你滾動(dòng)到相應(yīng)的行時(shí)，當(dāng)前行的圖片才即時(shí)加載的，這樣子的話頁面在打開只加可視區(qū)域的圖片，而其它隱藏的圖片則不加載，一定程序上加快了頁面加載的速度，對于比較長的頁面來說，這個(gè)方案是比較好的。2011-03-03
EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實(shí)現(xiàn)
這篇文章主要介紹了EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本文主要介紹jQuery中$符號(hào)命名沖突的解決方法，希望能幫到大家，有需要的朋友可以參考一下。2016-06-06