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 ui css framework
Jun 28 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
新手快速学习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 5.0创建图形的巧妙方法
2010/10/12 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python模块导入的方法
2019/10/24 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
初中科学教学反思
2014/01/21 职场文书
民主生活会剖析材料
2014/09/30 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL