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 相关文章推荐
jquery tab插件制作实现代码
Jun 22 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
Javascript动画效果(3)
Oct 11 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
Form表单上传文件(type="file")的使用
Aug 03 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP生成sitemap.xml地图函数
2013/11/13 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
Python可变参数用法实例分析
2017/04/02 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
python程序如何进行保存
2020/07/03 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
银行贷款承诺书
2014/03/29 职场文书
开学典礼演讲稿
2014/05/23 职场文书
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript