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 各种浏览器下获得日期区别
Dec 22 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 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
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python抓取网页中的图片示例
2014/02/28 Python
python装饰器深入学习
2018/04/06 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python实现批量修改文件名
2020/03/23 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
计划生育宣传标语
2014/06/21 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android