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);

}

四、评价

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

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

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

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

本文主要是对JS操作JSON的要领做下总结。

在JSON中,有两种结构:对象和数组。

1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:

var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};

2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。

例如:

var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

为了方便地处理JSON数据,JSON提供了json.js包,下载地址:点击链接

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:

var str1 = '{ "name": "cxh", "sex": "man" }';

JSON对象:

var str2 = { "name": "cxh", "sex": "man" };

一、JSON字符串转换为JSON对象

要运用上面的str1,必须运用下面的要领先转化为JSON对象:

//由JSON字符串转换为JSON对象

var obj = eval('(' + str + ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);

Alert(obj.sex);

特别留心:如果obj本来就是一个JSON对象,那么运用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用parseJSON()函数处理后会有疑问(抛出语法异常)。

二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。

例如:

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

留心:

上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的JSON 修改了API,将JSON.stringify() 和JSON.parse() 两个要领都注入到了Javascript 的内建对象里面,前者变成了Object.toJSONString(),而后者变成了String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。

注:

json数据的格式要求非常严格,属性名称必须是用双引号“”括起来。一定要注意,自己就吃过这方面的亏。

json进阶(一)js读取解析JSON类型数据的更多相关文章

  1. js读取解析JSON类型数据【申明:来源于网络】

    js读取解析JSON类型数据[申明:来源于网络] 地址:http://blog.csdn.net/sunhuaqiang1/article/details/47026841

  2. js读取解析JSON类型数据(转)

    谢谢博主,转自http://blog.csdn.net/beyond0851/article/details/9285771 一.什么是JSON? JSON(JavaScript Object Not ...

  3. js读取解析JSON类型数据

    原文地址:http://www.ablanxue.com/prone_3691_1.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立 ...

  4. js读取解析JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  5. js读取解析JSON数据(转)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  6. Linux重装为Windows后读取原EXT类型数据盘

    Linux重装为Windows后读取原EXT类型数据盘 1 2 3 4 分步阅读 Windows的文件系统通常使用NTFS或者FAT32格式,而Linux的文件系统格式通常是EXT系列.当操作系统从L ...

  7. 用js解析经json序列化后的C#的DateTime类型数据

    格式化日期(网上到处是),把下面的代码添加到jQuery.js文件中 //格式化日期 Date.prototype.format = function(format) { /* * eg:format ...

  8. js中读取解析json数据

    在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键. JSON字符串:       'var str1 = ' ...

  9. asp.net中json格式化及在js中解析json

    类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...

随机推荐

  1. Windows下的DOM操作

    前言:这学期学Linux之后,发现用命令行的方式来操作电脑还是很好玩的~写这篇随笔来总结下Windows环境下通过DOS来执行命令的操作,希望能帮到您~自己忘记的时候能回来复习emmm 启动DOS环境 ...

  2. Java 零散笔记

    运算符: 整数被0除将会产生一个异常,而浮点数被0除会得到无穷大或NaN结果. 二元运算符: 如果运算符得到一个值,其类型与左侧操作数的类型不用,就会发生强制类型转换. int x = 0; x += ...

  3. Docker服务端防护

    运行一个容器或应用程序的核心是通过 Docker 服务端.Docker 服务的运行目前需要 root 权限,因此其安全性十分关键. 首先,确保只有可信的用户才可以访问 Docker 服务.Docker ...

  4. python3+django2 开发易语言网络验证(上)

    创作背景: 在某论坛中下载到一套php开发易语言网络验证的教程,照着看下来,花了两天的时间,结果发现教程里开发的网络验证,以及随着教程一起给学员的源码,都存在着根本用不了的bug!我想要看看能不能在原 ...

  5. 让你的代码量减少3倍!使用kotlin开发Android(一)

    让你的代码量减少3倍!使用kotlin开发Android(一) 创建Kotlin工程 本文同步自博主的私人博客:wing的地方酒馆 写在前面 使用kotlin开发android已经两周多了.得到的好处 ...

  6. Dynamics CRM2016 关闭错误报告弹框提示

    在之前的版本中错误报告的弹框提示是可以在隐私首选项中设置关闭的,如下图所示 但是在2016中这个设置没了 有人说在右上角的选项中设置,但那个只能是设置个人的无法修改系统级别的.在系统中找了半天还是没有 ...

  7. 常用的DDL语句

    create database mydb1; 创建一个名称为mydb1的数据库. use db_name; 切换数据库 ; show databases; 查看所有的数据库: select datab ...

  8. 理解性能的奥秘——应用程序中慢,SSMS中快(2)——SQL Server如何编译存储过程

    本文属于<理解性能的奥秘--应用程序中慢,SSMS中快>系列 接上文:理解性能的奥秘--应用程序中慢,SSMS中快(1)--简介 本文介绍SQL Server如何编译存储过程并使用计划缓存 ...

  9. Dynamics CRM2013 Odata的filter中含有日期字段时遇到的一个奇葩问题

    在使用Odata拼写filter时我们一般都用工具,因为手写是件极不靠谱且错误率极高的事,下图是我用query designer拼出来的一个filter,因为时间是参数,所以在拷贝出下面这段filte ...

  10. 02_IO操作的基本规律(InputStream,OutputStream,Reader,Writer,FileReader,FileWriter,BufferedReader,BufferedWri

     模拟BufferedInputStream,编写一个类 package toto.IO; import java.io.IOException; import java.io.InputStre ...