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. ng-book札记——Angular工作方式

    Angular应用由组件(Component)构成.它与AngularJS中的指令相似(directive). 应用 一个Angular应用本质上是一个组件树.在组件树的顶层,最上级的组件即是应用本身 ...

  2. git 同步勾子

    #!/bin/bash git --git-dir=/var/www/domain/.git --work-tree=/var/www/domain pull uwsgi --reload /tmp/ ...

  3. VirtualBox: Resize a Fedora, CentOS, or Windows Dynamic Guest Virtual Disk (VDI) in VirtualBox

    Here's the scenario: you've set up Dynamically Allocated Storage for the hard drive on your Guest VM ...

  4. Swift类型推测在可选调用中的小提示

    我们知道Swift中协议里也有对应于Objc中的可选方法或计算属性,当然协议必须以@objc伪指令修饰否则不可以哦. 如下示例: @objc protocol Transaction{ fun com ...

  5. Scala:函数和闭包

    http://blog.csdn.net/pipisorry/article/details/52902271 Scala函数 Scala 有函数和方法,二者在语义上的区别很小.Scala 方法是类的 ...

  6. DJango内建模板转向jinja2的小脚本

    import re,os def org(path=os.getcwd(),fs=None,preview=True): fs = fs or [] for root,dirs,files in os ...

  7. FORM实现中打开图片,链接,文档(参考自itpub上一篇帖子,整理而来)

    FORM实现中打开图片,链接,文档 参考自itpub上一篇帖子,整理而来 1.添加PL程序库D2kwutil.pll 2.主要实现程序 /*过程参数说明: v_application --打开文件的应 ...

  8. Android Multimedia框架总结(十四)Camera框架初识及自定义相机案例

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52738492 前言:国庆节告一段 ...

  9. Team Foundation Server 2015 Update 2.1 发布日志

    微软在 2016年5月5日发布了Visual Studio Team Foundation Server 2015 update 2.1. 下面我们来看看Update2.1中给我们带来了哪些新功能. ...

  10. iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

    上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...