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 字符串操作函数
Jul 25 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
React快速入门教程
Jan 17 Javascript
H5上传本地图片并预览功能
May 08 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
python的pip有什么用
2020/06/17 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
地理教师岗位职责
2014/03/16 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
保研推荐信格式
2015/03/25 职场文书
远程教育培训心得体会
2016/01/09 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Python多个MP4合成视频的实现方法
2021/07/16 Python