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 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
解决vue页面刷新,数据丢失的问题
Nov 24 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 正则学习实例
2008/07/30 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
javascript 动态添加表格行
2006/06/22 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
layui table 参数设置方法
2018/08/14 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python遍历目录中的所有文件的方法
2016/07/08 Python
python读取和保存视频文件
2018/04/16 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
后备干部考察材料
2014/02/12 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
奖励申请报告范文
2015/05/15 职场文书
2016年感恩节寄语
2015/12/07 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis