javascript中JSON的操作介绍

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

JSON语法wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

JSON建构于两种结构:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

对象——名称/值对的集合。不同的语言中,它被理解为对象,纪录,结构,字典,哈希表,有键列表(keyed list),或者关联数组。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

数组——值的有序列表。在大部分语言中,它被理解为数组。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

JSON没有变量或其他控制结构。JSON只用于数据传输。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

本文主要是对JS操作JSON的方法做下总结。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

在JSON中,有两种结构:对象和数组。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔,名称用引号括起来,值如果是字符串则必须用括号,数值型则不需要。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

例如如下代码:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

例如如下代码:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

为了方便地处理JSON数据,JSON提供了json.js包,下载地址:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

http://www.json.org/json.jswEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

JSON字符串,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var str1 = '{ "name": "cxh", "sex": "man" }';wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

JSON对象:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var str2 = { "name": "cxh", "sex": "man" };wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

一、JSON字符串转换为JSON对象wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

要使用上面的str1,必须使用下面的方法先转化为JSON对象,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

//由JSON字符串转换为JSON对象wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var obj = eval('(' + str + ')');wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

或者:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

或者:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

然后,就可以这样读取,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

Alert(obj.name);wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

Alert(obj.sex);wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

例如:var last=obj.toJSONString(); //将JSON对象转化为JSON字符wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

或者wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

alert(last);wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

string对象转化为json对象.wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 
  1. function stringToJson(stringValue)  
  2. {  
  3.    eval("var theJsonValue = "+stringValue);  
  4.    return theJsonValue;  
  5. }  

4:json数组转化为 String对象的方法(要掉要上面那个方法)wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 
  1. function JsonArrayToStringCfz(jsonArray)  
  2.    var JsonArrayString = "[";  
  3.    for(var i=0;i<jsonArray.length;i++){  
  4.    JsonArrayString=JsonArrayString+JsonToStringCfz(jsonArray[i])+",";  
  5.    }  
  6.    JsonArrayString = JsonArrayString.substring(0,JsonArrayString.length-1)+"]";  
  7.    return JsonArrayString;  
  8. }  

5 利用json.js json转stringwEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 
  1. <script src="json2.js"></script>  
  2. <script>  
  3. var date = {myArr : ["a" , "b" , "c" , "d"] , count : 4};  
  4. var str = JSON.stringify(date);  
  5. alert(str);  
  6. </script>  

使用XMLHttpRequest对象创建JSON数据请求wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

1、创建请求wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

如果直接请求服务器上一个JSON文件中的JSON数据,则可以利用文件名来请求JSON文件,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

respone.open(“GET”,”classes.txt”,true);wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

在这种情况下,classes.txt是JSON数据文件的名称,request是创建用来存放XMLHttpRequest对象的变量。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

2、 解析响应wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

一旦接受服务器的JSON数据,就可以采用两种不同的方式解析该响应。可以使用JavaScript的内置函数eval(),或者为了进一步的安全,使用JSON解析器代替。wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

eval()方法可以把JavaScript字符串当作参数,还可以将该字符串转换成对象,或作为命令动作。如果使用XMLHttpRequest对象的responseText属性请求JSON数据,那么使用eval()将JSON文本字符串转换成JavaScript对象。因为JSON字符串常包包含花括号,所以用圆括号来括住JSON字符串,以表明字它是一个求值表达式,而不是一个要运行的命令,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var jsonResp=request.responseText;wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

jsonResp=eval(“(”+jsonResp+”)”);wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

如果Web服务器既提供JSON数据也提供请求页面,则适合选用eval()方法。如果涉及安全,则适合使用JSON解析器。JSON解析器只作用于JSON文本,并且不执行其他JavaScript。在这种情况下,可以使用responseText,但要使用parseJSON()方法将JSON文本字符串转换成JavaScript对象。要访问parseJOSN函数,需要要添加引用json.js文件到页面中,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

var jsonResp=request.responseText;wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

jsonResp=jsonResp.parseJSON();wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

下面以实例来说明在JavaScript中简单使用JSON,代码如下:wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

 
  1. <script type="text/javascript">  
  2. var user =[  
  3. {  
  4.       "name":”shenmiweiyi”,  
  5.       "QQ":306451129,  
  6.       "email":”shenmiweiyi@163.com”  
  7.       "address":  
  8.       [  
  9.             {"City":"ZhengZhou","ZipCode":"450000"},  
  10.             {"City":"BeiJing","ZipCode":"100000"}  
  11.       ]  
  12. },  
  13. {  
  14.       "name":”kehao”,  
  15.       "QQ":254892313,  
  16.       "email":”kehao@163.com”  
  17.       "address":  
  18.       [  
  19.             {"City":"ShangHai","ZipCode":"200000"},  
  20.             {"City":"GuangZhou","ZipCode":"510000"}  
  21.       ]  
  22.  }  
  23. ]  
  24. alert(user[0].name+”的Email是:”user[0].email);  //outputs shenmiweiyi的Email是:shenmiweiyi@163.com  
  25.  alert(user[1].name+”住在:”user[1].address[0].city) //outputs kehao住在:ShangHai  
  26. pt>  
  27.  
 
wEv迪尔课堂(迪尔掌上课堂)--官网 免费自学网站

扫一扫手机访问