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 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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中3种方法删除字符串中间的空格
2014/03/10 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php算法实例分享
2015/07/14 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
调试php程序的简单步骤
2019/10/04 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
使用js实现数据格式化
2014/12/03 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jquery选择器简述
2015/08/31 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
vue.js学习之UI组件开发教程
2017/07/03 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
用Python编程实现语音控制电脑
2014/04/01 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
简历的自我评价
2014/02/03 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
体育教师教学随笔
2015/08/15 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS