Ajax中解析Json的两种方法对比分析


Posted in Javascript onJune 25, 2015

eval();  //此方法不推荐

JSON.parse();  //推荐方法

一、两种方法的区别

我们先初始化一个json格式的对象:

var jsonDate = '{ "name":"周星驰","age":23 }'


var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法


var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法

然后在控制台调用:

console.log( jsonObj.name );  // 两种方法都可以正确输入 周星驰

那么问题来了 两种方法有什么区别呢?(下面我们稍微把代码改动一下,蓝色字体为修改部分)

var jsonDate = '{ "name":alert("hello"),"age":23 }'


var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法


console.log( jsonObj.age ); //会先执行“alert”输出“hello” 然后才输出 23

换“JSON.parse();”方法:

var jsonDate = '{ "name":alert("hello"),"age":23 }'


var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法


cosole.log( jsonobj.age ) // 报错 这个错误告诉我们这个字符串是不合法的

小结:“eval();”方法解析的时候不会去判断字符串是否合法,而且json对象中的js方法也会被执行,这是非常危险的;而“JSON.parse();”方法的优点就不用多说了,推荐此方法。(不明白的盆友可以自己在控制台测试一下)

二、扩展问题

var jsonDate = '{ "name":"周星驰","age":23 }'

大家可以看到在上面测试时一直用红色把包在花括号外面的引号标注了起来,这对引号是很关键却又是常常被忽略的,因为 “eval();” 和 “JSON.parser();” 这两个方法的参数只接受字符串,也就是说只能解析字符串!!

那我不经会有一个思考,我们在初始化的时候若不加引号对,那么它本身就是对象,js可以直接获取对象本身的属性和方法;为什么还要加引号将它变成字符串之后再用 “eval();” 或者 “JSON.parse();” 解析,这样做不是既不环保又没有效率吗?

原因很简单:前端提供给后台的只能是字符串数据格式,后台返回给前台的就看返回的是什么数据格式,是字符串就必须解析之后再用。

(这个小问题一般大家都会忽略掉,不太关注。我之所以好奇的原因也是因为对后台了解的不够,把这个问题抛出来希望对后台不熟的朋友有所帮助,知道是怎么回事后自然而然会加深记忆,在开发过程中就不会漏掉了)

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
jQuery动画与特效详解
Feb 01 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
新手快速学习JavaScript免费教程资源汇总
Jun 25 #Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 #Javascript
深入理解JavaScript编程中的原型概念
Jun 25 #Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 #Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 #Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 #Javascript
深入分析JSON编码格式提交表单数据
Jun 25 #Javascript
You might like
php将时间差转换为字符串提示
2011/09/07 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
php截取视频指定帧为图片
2016/05/16 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python中四舍五入的正确打开方式
2021/01/18 Python
CSS3 边框效果
2019/11/04 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
母亲节演讲稿范文
2014/01/02 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
上班离岗检讨书
2014/01/27 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
高中生操行评语大全
2014/04/25 职场文书
清洁工个人总结
2015/03/04 职场文书
无故旷工检讨书
2015/08/15 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python