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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
基于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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
js分页代码分享
2014/04/28 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python随机生成数模块random使用实例
2015/04/13 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
幼儿园大班开学教师寄语
2014/04/03 职场文书
借款协议书
2014/04/12 职场文书
电教室标语
2014/06/20 职场文书
民主生活会发言材料
2014/10/20 职场文书
董存瑞观后感
2015/06/11 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang