jquery eval解析JSON中的注意点介绍


Posted in Javascript onAugust 23, 2013

在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式:

1.一种为使用eval()函数。

2. 使用Function对象来进行返回解析。

使用eval函数来解析,并且使用jquery的each方法来遍历

用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对象
为什么要 eval这里要添加 “("("+data+")");//”呢?

原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:

alert(eval("{}"); // return undefined 
alert(eval("({})");// return object[Object]

对于这种写法,在JS中,可以到处看到。

如: (function()) {}(); 做闭包操作时等。
--------------------------------------------------------------------------------

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的脚本库。

第二种解析方式就是使用Function对象来完成,它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析

var json='{"name":"CJ","age":18}'; 
data =(new Function("","return "+json))();

此时的data就是一个会解析成一个 json对象了.
Javascript 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 #Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 #Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 #Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 #Javascript
高效率JavaScript编写技巧整理
Aug 23 #Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 #Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 #Javascript
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
jquery延迟对象解析
2016/10/26 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
人力资源经理自我评价
2014/01/04 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
施工工地安全标语
2014/06/07 职场文书
天下第一关导游词
2015/02/06 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers