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 相关文章推荐
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
js日期对象兼容性的处理方法
2014/01/28 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
护理毕业生自我鉴定
2014/02/11 职场文书
房产公证书格式
2015/01/26 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android