Js中JSON数据交换使用总结

Json格式简介

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

在JSON中，有两种结构：Json（花括号保存对象）对象和Json数组（方括号保存数组）。

Json对象以“{”（左大括号）开始，“}”（右大括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间运用“,”（英文逗号）分隔。名称用引号括起来；值如果是字符串则必须用引号，数值型则不须要。例如：

var jsonObj={"username":"Jim","password":123456,"topscore":2000,"topplaytime":"2009-08-20"}；

Json数组是值（value）的有序集合。一个Json数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用“,”（英文逗号）分隔。例如：

var jsonArray=["Jim",123456, 2000, "2009-08-20"];

如果将Json对象和Json数组进行嵌套使用，则可以组成很复杂的json格式，如Json数组的每个元素可以为Json对象：

var jsonObjArray=[{"username":"Jim","password":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"username":"Tom","password":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号中）、对象（在花括号中）、null。

Json与Json字符串互相转化

1.jQuery插件支持的转换方式。

$.parseJSON(jsonStr); //jQuery.parseJSON(jsonStr),可以将json字符串转换成json对象。

2.浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器：

JSON.parse(jsonStr); //可以将json字符串转换成json对象

JSON.stringify(jsonObj); //可以将json对象转换成json对符串

注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。

3.Javascript支持的转换方式

eval('(' + jsonStr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号

注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。

4 .JSON官方的转换方式：

http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；

可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。

自己编写的用于测试json解析的代码，需要引入json2.js和jquery.js。

  1 <html>
  2     <head>
  3         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4         <title>JSON范例</title>
  5         <script src="../scripts/json2.js"></script>
  6         <script src="../scripts/jquery.js" type="text/javascript"></script>
  7         <script type="text/javascript">
  8         //json字符串转Json对象1
  9         function jsonStrToJsonObject1(){
 10             //注意：如果使用单引号定义json字符串，则单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
 11             var jsonStr1 = '{"root":[{"name":"1","value":0},{"name":"6101","value":"北京市"},{"name":"6102","value":"天津市"}],"rows":9}';
 12             //注意：如果使用双引号定义json字符串，则双引号引号写在{}外，每个属性名都必须用反斜杠转义字符和双引号
 13             var jsonStr2 = "{"root":[{"name":"1","value":0},{"name":"6101","value":"北京市"},{"name":"6102","value":"天津市"},{"name":"6103","value":"上海市"}],"rows":9}";
 14             
 15             //jQuery中提供的parseJSON方法，可接受一个JSON字符串，返回解析后的对象，所以需要引入JQuery核心库
 16             var jsonObj = jQuery.parseJSON(jsonStr2);// 解析后返回一个JSON对象
 17             alert(jsonObj.rows);
 18             alert(jsonObj.root);
 19             
 20             //特殊方式：foreach的形式
 21             for(var p in jsonObj.root){//遍历json数组时，这里写p为索引，0,1……
 22                 alert(jsonObj.root[p].name + " " + jsonObj.root[p].value);
 23             }
 24             
 25             alert(jsonObj.root[1].value);
 26             alert(JSON.stringify(jsonObj.root[1]));
 27         }
 28         
 29         //json字符串转Json对象2
 30         function jsonStrToJsonObject2(){
 31             var jsonStr1 = '{"root":[{"name":"1","value":0},{"name":"6101","value":"北京市"},{"name":"6102","value":"天津市"}],"rows":9}';
 32             var jsonStr2 = "{"root":[{"name":"1","value":0},{"name":"6101","value":"北京市"},{"name":"6102","value":"天津市"},{"name":"6103","value":"上海市"}],"rows":9}";
 33             
 34             //JSON中提供的parse方法，可接受一个JSON字符串，返回解析后的对象，所以需要引入JQuery核心库
 35             var jsonObj = JSON.parse(jsonStr2);// 解析后返回一个JSON对象
 36             alert(jsonObj.rows);
 37             alert(jsonObj.root);
 38             
 39             //一般方式：普通for循环
 40             for(var i = 0; i < jsonObj.root.length; i++){
 41                 alert(jsonObj.root[i].name + " " + jsonObj.root[i].value);
 42             }
 43             //console.log(jsonObj.root);
 44             alert(jsonObj.root[1].value);
 45             alert(JSON.stringify(jsonObj.root[1]));
 46         }
 47         
 48         //json字符串转Json对象3
 49         function jsonStrToJsonObject3(){
 50             var jsonStr = "{"root":[{"name":"1","value":0},{"name":"6101","value":"北京市"},{"name":"6102","value":"天津市"},{"name":"6103","value":"上海市"}],"rows":9}";
 51             var jsonObj = eval("("+jsonStr+")");
 52             
 53             alert(jsonObj.rows);
 54             //手动追加一个json对象到数组中
 55             jsonObj.root.push({"name":"029","value":"西安市"});
 56             alert(jsonObj.root);
 57             //console.log(jsonObj.root);
 58             alert(jsonObj.root[1].value);
 59             alert(JSON.stringify(jsonObj.root[1]));
 60             
 61             //jQuery方式：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。
 62             $.each(jsonObj.root,function(idx,item){
 63                 if(idx==0){
 64                     return true;//同countinue，返回false同break
 65                 }
 66                 alert("name:"+item.name+",value:"+item.value);
 67             });
 68 
 69         }
 70         
 71         //测试使用eval函数json字符串转Json对象4
 72         function testEval(){
 73             
 74             //var jsonStr1 = "{name:'test',age:18}";//此种格式也可以
 75             //var jsonObj1 = eval(jsonStr1);//VM134:1 Uncaught SyntaxError: Unexpected token :
 76             //原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式
 77             //加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。
 78 　　　　　　　//举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
 79             alert(eval("{}")); //return undefined
 80             alert(eval("({})"));//return object[Object]//对于这种写法，在JS中，可以到处看到。 如: (function()) {}(); 做闭包操作时等。
 81             
 82             //var jsonStr1 = "{name:'test',age:18}";//此种格式也可以
 83             var jsonStr2 = "{"name":"Tom","age":18}";
 84             var jsonObj2 = eval("("+jsonStr2+")");
 85             
 86             alert(jsonObj2);
 87             
 88             //获取属性值的两种方式
 89             alert(jsonObj2.name);
 90             alert(jsonObj2["name"]);
 91             
 92             //在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式： 1.一种为使用eval()函数。 2. 使用Function对象来进行返回解析。 
 93             //1.第一种对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象。
 94             //2.第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析。
 95             var json='{"name":"CJ","age":18}';
 96             var data =(new Function("","return "+json))();
 97             alert(data.name);
 98         }
 99         
100         //Json对象转json字符串
101         function jsonObjectToJsonStr(){
102             var jsonObj=
103             { 
104             root: 
105             [ 
106             {name:'1',value:'0'}, 
107             {name:'6101',value:'北京市'}, 
108             {name:'6102',value:'天津市'}, 
109             {name:'6103',value:'上海市'}, 
110             {name:'6104',value:'重庆市'}, 
111             {name:'6105',value:'渭南市'}, 
112             {name:'6106',value:'延安市'}, 
113             {name:'6107',value:'汉中市'}, 
114             {name:'6108',value:'榆林市'}, 
115             {name:'6109',value:'安康市'}, 
116             {name:'6110',value:'商洛市'} 
117             ],
118             rows:9
119             };
120             alert(jsonObj.rows);
121             alert(jsonObj.root);
122             var jsonStr = JSON.stringify(jsonObj);//可以将json对象转换成json字符串
123             alert(jsonStr);
124         }
125         
126         //Json对象转json字符串
127         function checkObjAndArray(){
128             //
129             var cityObj1 = new Object();
130             cityObj1.name = "0917";
131             cityObj1.value = "宝鸡";
132             
133             alert(cityObj1);
134             alert(cityObj1.value);
135             var cityStr1 = JSON.stringify(cityObj1);//可以将json对象转换成json字符串
136             alert(cityStr1);
137             
138             var cityObj2 = new Object();
139             cityObj2.name = "029";
140             cityObj2.value = "西安";
141             
142             alert(cityObj2);
143             alert(cityObj2.value);
144             var cityStr2 = JSON.stringify(cityObj2);//可以将json对象转换成json字符串
145             alert(cityStr2);
146             
147             var cityArray = new Array();
148             cityArray.push(cityObj1);
149             cityArray.push(cityObj2);
150             alert(cityArray);
151             var cityStrs = JSON.stringify(cityArray);//可以将json对象转换成json字符串
152             alert(cityStrs);
153         }
154         
155     </script>
156     </head>
157     <body>
158         <input type="button" name="jsonTest" onclick="jsonStrToJsonObject1()" value="json字符串转Json对象1（jQuery.parseJSON(jsonstr)）">
159         <p>
160         <input type="button" name="jsonTest" onclick="jsonStrToJsonObject2()" value="json字符串转Json对象2（JSON.parse(jsonstr)）">
161         <p>
162         <input type="button" name="jsonTest" onclick="jsonStrToJsonObject3()" value="json字符串转Json对象3（eval(jsonstr)）">
163         <p>
164         <input type="button" name="jsonTest" onclick="jsonObjectToJsonStr()" value="Json对象转json字符串（JSON.stringify(jsonobj)）"/>
165         <p>
166         <input type="button" name="jsonTest" onclick="testEval()" value="测试eval函数（testEval()）">
167         <p>
168         <input type="button" name="jsonTest" onclick="checkObjAndArray()" value="测试对象和数组（checkObjAndArray()）">
169         <p>
170         
171     </body>
172 </html>