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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 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
PHP 地址栏信息的获取代码
2009/01/07 PHP
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
python模拟事件触发机制详解
2018/01/19 Python
Python错误处理操作示例
2018/07/18 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python开启debug模式的方法
2019/06/27 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
PyTorch预训练的实现
2019/09/18 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
学校岗位设置方案
2014/01/16 职场文书
绿色环保演讲稿
2014/05/10 职场文书
岗位工作说明书
2014/07/29 职场文书
法人授权委托书范本
2014/09/17 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers