jquery JSON的解析方式


Posted in Javascript onJuly 25, 2009

这里考虑都考虑的是服务器返回的是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://gaoyusi.blog.163.com/",{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 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
微信小程序 video组件详解
Oct 25 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
jqPlot Option配置对象详解
Jul 25 #Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 #Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 #Javascript
从父页面读取和操作iframe中内容方法
Jul 25 #Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 #Javascript
JavaScript中null与undefined分析
Jul 25 #Javascript
js 字符串操作函数
Jul 25 #Javascript
You might like
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
session 加入redis的实现代码
2016/07/15 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
python实现汉诺塔方法汇总
2016/07/25 Python
Python 装饰器使用详解
2017/07/29 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
使用python绘制二维图形示例
2019/11/22 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
python自动识别文本编码格式代码
2019/12/26 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
鲜果饮品店创业计划书
2014/01/21 职场文书
考试没考好检讨书
2014/01/31 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
精彩广告词大全
2014/03/19 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
担保书格式
2015/01/20 职场文书
档案接收函格式
2015/01/30 职场文书
政协常委会议主持词
2015/07/03 职场文书