js读取并解析JSON类型数据的方法


Posted in Javascript onNovember 14, 2015

本文实例讲述了js读取并解析JSON类型数据的方法。分享给大家供大家参考,具体如下:

一、什么是JSON?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式,同时,JSON是 JavaScript 原生格式。
非常适合于服务器与 JavaScript 的交互

二、为什么使用JSON而不是XML

他们都是这样说的:尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 JavaScript 解析 XML,都常常导致复杂的代码,极低的开发效率。实际上,对于大多数 Web 应用来说,他们根本不需要复杂的 XML 来传输数据,XML 的扩展性很少具有优势,许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比,返回 HTML 片段大大降低了系统的复杂性,但同时缺少了一定的灵活性

三、如何使用

下面代码是html代码片段,实现点击按钮解析json格式数据并alert内容

<input type="button" value="button" onclick="clicks();"/>

下面是js函数代码:
var json = {
  contry:{
  area:{
   man:"12万",
   women:"10万"
  }
  }
 };
//方式一:使用eval解析
 var obj = eval(json);
 alert(obj.constructor);
 alert(obj.contry.area.women);
 //方式二:使用Funtion函数
 var strJSON = "{name:'json name'}";//得到的JSON
 var obj = new Function("return" + strJSON)();//转换后的JSON对象
 alert(obj.name);//json name
 alert(obj.constructor);
//复杂一点的json数组数据的解析
 var value1 = [ 
  {"c01":"1","c02":"2","c03":"3","c04":"4","c05":"5","c06":"6","c07":"7","c08":"8","c09":"9"},
   {"c01":"2","c02":"4","c03":"5","c04":"2","c05":"8","c06":"11","c07":"21","c08":"1","c09":"12"},
  {"c01":"5","c02":"1","c03":"4","c04":"11","c05":"9","c06":"8","c07":"1","c08":"8","c09":"2"}
   ]; 
 var obj1 = eval(value1);
 alert(obj1[0].c01);
 //复杂一点的json的另一种形式
 var value2 = {
   "list":[
   {"password":"1230","username":"coolcooldool"},
   {"password":"thisis2","username":"okokok"}
   ],
   "array":[
   {"password":"1230","username":"coolcooldool"},
   {"password":"thisis2","username":"okokok"}
   ]
   };
 var obj2 = eval(value2);
 alert(obj2.list[0].password);
}

四、eval

① 这种形式将使得性能显著降低,因为它必须运行编译器

② eval函数还减弱了你的应用的安全性,因为它给被求值的文本赋予了太多的权力。就像with语句执行的方式一样,它降低了语言的性能

③ Function构造器是eval的另一种形式,所以它同样也应该被避免使用。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
基于JS实现PHP的sprintf函数实例
Nov 14 #Javascript
javascript动态生成树形菜单的方法
Nov 14 #Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 #Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 #Javascript
学习JavaScript正则表达式
Nov 13 #Javascript
jquery实现九宫格大转盘抽奖
Nov 13 #Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 #Javascript
You might like
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python书籍信息爬虫实例
2018/03/19 Python
python实现俄罗斯方块游戏
2020/03/25 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
安全资料员岗位职责
2013/12/14 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python