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 相关文章推荐
使用typeof判断function是否存在于上下文
Aug 14 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解React中共享组件逻辑的三种方式
Feb 02 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的日期与时间函数技巧
2008/04/24 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
JS中使用media实现响应式布局
2017/08/04 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python学习入门之区块链详解
2017/07/25 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python几种常用功能实现代码实例
2019/12/25 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
和平主题的演讲稿
2014/01/12 职场文书
护理专业自荐信范文
2014/02/26 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
法人授权委托书范本
2014/09/17 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
JS封装cavans多种滤镜组件
2022/02/15 Javascript