JQuery 解析多维的Json数据格式


Posted in Javascript onNovember 02, 2009

这就要利用到JQuery,ASHX以及Json来合作了。一篇文章有多个评论,每十个为一页。用户每点击下一页则自动抓去下一页,这个过程采用无刷新放心进行。
Json格式其实和表格式有异曲同工之妙,在网络传输中,它比XML还省流量,而且与JS有更好的融合,更容易被解析。Json格式样例如下:

{"Products":[ 
{"orderid":"11077","customerid":"RATTC"}, 
{"orderid":"11078","customerid":"RATT"} 
], 
"Img":[{"id":"12345","url" 
:"image/1.jpg"} 
]}

其中Products和Img我们可以认为是一张表的表名。在Products表中,orderid和customerid都是Products的字段,11077与RATTC可以理解为对应字段的值。Img部分也是一样。所以,上面Products存在两笔记录,而Img存在一笔记录而已。
那么我们怎么样在JQuery里面进行解析出相应的表,栏位和值呢?
在JQuery里面我们可以用:
var Products= Json.Products;
来获得对Products表的筛选。接下来我们就对Products进行循环读取值:
$.each(Products, function(i, n) { 
str += "<p id='xuhao'>" + n.orderid+ "ID" + n.customerid + "</p>"; 
});

$.each(Products, function(i, n) {} 这里的Products就是我们的目标Json数据中的表了了。i代表记录的顺序,从0开始(0代表第一笔,1代表第二笔...),而n就代表对应字段的值了。 对Img的读取也是类似~~
如有不当之处请指正,谢谢!!
Javascript 相关文章推荐
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 #Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 #Javascript
JS OOP包机制,类创建的方法定义
Nov 02 #Javascript
JQuery 网站换肤功能实现代码
Nov 02 #Javascript
Javascript结合css实现网页换肤功能
Nov 02 #Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 #Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 #Javascript
You might like
php中time()和mktime()方法的区别
2013/09/28 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
django最快程序开发流程详解
2019/07/19 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python包和模块的分发详细介绍
2020/06/19 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
医学生实习自荐信
2013/10/01 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
党员作风建设整改方案
2014/10/27 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL