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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
react PropTypes校验传递的值操作示例
Apr 28 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
一个目录遍历函数
2006/10/09 PHP
phplot生成图片类用法详解
2015/01/06 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
如何卸载python插件
2020/07/08 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
零件设计自荐信范文
2013/11/27 职场文书
社区安全检查制度
2014/02/03 职场文书
购房协议书
2014/04/11 职场文书
行政上诉状范文
2015/05/23 职场文书
银行工作心得体会范文
2016/01/23 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript