jquery解析JSON数据示例代码


Posted in Javascript onMarch 17, 2014

这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js

用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。
这里首先给出JSON字符串集,字符串集如下:
代码如下:

var data=" 
{ 
root: 
[ 
{name:'1',value:'0'}, 
{name:'6101',value:'北京市'}, 
{name:'6102',value:'天津市'}, 
{name:'6103',value:'上海市'}, 
{name:'6104',value:'重庆市'}, 
{name:'6105',value:'渭南市'}, 
{name:'6106',value:'延安市'}, 
{name:'6107',value:'汉中市'}, 
{name:'6108',value:'榆林市'}, 
{name:'6109',value:'安康市'}, 
{name:'6110',value:'商洛市'} 
] 
}";

这里以jquery异步获取的数据类型——json对象和字符串为依据,分别介绍两种方式获取到的结果处理方式。
1.对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:
var dataObj=eval("("+data+")");//转换为json对象 
alert(dataObj.root.length);//输出root的子对象数量 
$.each(dataObj.root,fucntion(idx,item){ 
if(idx==0){ 
return true; 
} 
//输出每个root子对象的名称和值 
alert("name:"+item.name+",value:"+item.value); 
})

注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。
2.对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说明数据处理方法:
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ 
//此处返回的data已经是json对象 
//以下其他操作同第一种情况 
$.each(data.root,function(idx,item){ 
if(idx==0){ 
return true;//同countinue,返回false同break 
} 
alert("name:"+item.name+",value:"+item.value); 
}); 
});

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。
Javascript 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 #Javascript
javascript内置对象arguments详解
Mar 16 #Javascript
javascript跨浏览器的属性判断方法
Mar 16 #Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 #Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 #Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 #Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 #Javascript
You might like
php多层数组与对象的转换实例代码
2013/08/05 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
python识别验证码的思路及解决方案
2020/09/13 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
小区门卫工作职责
2013/12/14 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
音乐学专业求职信
2014/07/22 职场文书
主题班会开场白
2015/06/01 职场文书
2016七夕情人节感言
2015/12/09 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL