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 相关文章推荐
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
德劲1104的电路分析与改良
2021/03/01 无线电
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python中的urllib模块使用详解
2015/07/07 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Django之模板层的实现代码
2019/09/09 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Shell如何接收变量输入
2012/09/24 面试题
法务专员岗位职责
2014/01/02 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
护理目标管理责任书
2014/07/25 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
质量保证书怎么写
2015/02/27 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
信息技术国培研修日志
2015/11/13 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python