jquery json 格式教程

介绍

我们知道AJAX技术能够使得每一次请求更加迅捷，对于每一次请求返回的不是整个页面，也仅仅是所需要返回的数据。通常AJAX通过返回XML格式的数据，然后再通过客户端复杂的JavaScript脚本解析和渲染这些XML格式的数据。

JSON（读Jason）是为了能够使得数据格式成为一种标准，更简单的被JavaScript解析。

 

优点

1、轻量级的数据交换格式

2、人们读写更加容易

3、易于机器的解析和生成

4、能够通过JavaScript中eval()函数解析JSON

5、JSON支持多语言。包括：ActionScript, C, C#, ColdFusion, E, Java, JavaScript, ML, Objective CAML, Perl, PHP, Python, Rebol, Ruby, and Lua.

 

语法

JSON语法是一种用于传输和生成数据的协定，很类似于C家族的语言，所以很容易被C家族的语言所解析。

对象：对象包含在{}之间

属性：采用Key-Value对来表示。属性之间使用逗号分开。  string : value

数组：数组存放在[]之间   [ elements ]

元素：元素之间用逗号分开

值：值可以是字符串，数字，对象，数组，true，false，null

例子：JSON

1. [
2. {
3. 　name:"Michael",
4. 　email:"17bity@gmail.com",
5. 　homepage:"http://www.google.com"
6. },
7. {
8. 　name:"John",
9. 　email:"john@gmail.com",
10. 　homepage:"http://www.google.com"
11. },
12. {
13. 　name:"Peggy",
14. 　email:"peggy@gmail.com",
15. 　homepage:"http://www.google.com"
16. }
17. ]

事实上google maps就没有采用XML传递数据，而是采用了JSON方案。

JSON的另外一个优势是”跨域性”，例如你在网页里使用

<script type=”text/javascript” src=”http://www.yyy.com/some.js”>

是完全可行的，这就意味着你可以跨域传递信息。而使用XMLHttpRequest却获取不了跨域的信息，这是Javascript内部的安全性质所限制的。

JSON能完全取代XML吗？当然不能，原因就在于XML的优势：通用性。要使服务器端产生语法合格的Javascript代码并不是很容易做到的，这主要发生在比较庞大的系统，服务器端和客户端有不同的开发人员。

 

JSON VS XML

 

可读性
JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。
可扩展性

XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。

编码难度
XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。

解码难度
XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。

流行度
XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj  (Asynchronous JavaScript and JSON)了。

简单 JSON 示例

1. 按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：
2. { ”firstName”: ”Brett” }
4. 这个示例非常基本，而且实际上比等效的纯文本名称/值对占用更多的空间：
5. firstName=Brett
7. 但是，当将多个名称/值对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个名称/值对的记录，比如：
8. { ”firstName”: ”Brett”, ”lastName”:”McLaughlin”, ”email”: ”brett@newInstance.com” }

 

 

从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。

值的数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在XML 中，需要许多开始标记和结束标记；如果使用典型的名称/值对（就像在本系列前面文章中看到的那种名称/值对），那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName 这样的形式。

如果使用 JSON，就只需将多个带花括号的记录分组在一起：

1. { ”programmers”: [
2.   { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
3.   { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
4.   { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
5.  ],
6. “authors”: [
7.   { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
8.   { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
9.   { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
10.  ],
11. “musicians”: [
12.   { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
13.   { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
14.  ]
15. }

 

这里最值得注意的是，能够表示多个值，每个值进而包含多个值。但是还应该注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称/值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。

在处理 JSON 格式的数据时，没有需要遵守的预定义的约束。所以，在同样的数据结构中，可以改变表示数据的方式，甚至可以以不同方式表示同一事物。

在 JavaScript 中使用 JSON

掌握了 JSON 格式之后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

将 JSON 数据赋值给变量

例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：

1. var people =
2.   { ”programmers”: [
3.     { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
4.     { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
5.     { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
6.    ],
7.   ”authors”: [
8.     { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
9.     { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
10.     { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
11.    ],
12.   ”musicians”: [
13.     { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
14.     { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
15.    ]
16.   }

这非常简单；现在 people 包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：

1. people.programmers[0].lastName;

注意，数组索引是从零开始的。所以，这行代码首先访问 people 变量中的数据；然后移动到称为 programmers 的条目，再移动到第一个记录（[0]）；最后，访问 lastName 键的值。结果是字符串值 “McLaughlin”。

下面是使用同一变量的几个示例。

JavaScript代码

1. people.authors[1].genre // Value is ”fantasy”
2. people.musicians[3].lastName// Undefined. This refers to the fourth entry, and there isn’t one
3. people.programmers.[2].firstName// Value is ”Elliotte”

 

修改 JSON 数据

正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据：

people.musicians[1].lastName = ”Rachmaninov”;

在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据。

转换回字符串

当然，如果不能轻松地将对象转换回本文提到的文本格式，那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单：

String newJSONtext = people.toJSONString();

这样就行了！现在就获得了一个可以在任何地方使用的文本字符串，例如，可以将它用作 Ajax 应用程序中的请求字符串。

更重要的是，可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换，只需执行相同形式的命令：

String myObjectInJSON = myObject.toJSONString();

这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON，只需调用一个简单的函数，就可以获得经过格式化的数据，可以直接使用了。对于其他数据格式，需要在原始数据和格式化数据之间进行转换。即使使用Document Object Model 这样的 API（提供了将自己的数据结构转换为文本的函数），也需要学习这个 API 并使用API 的对象，而不是使用原生的 JavaScript 对象和语法。

最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

 四种解析Json的方式：

1. //第一部分
2. var list1 = [1,3,4];
3. alert(list1[1]);
4. var list2 = [{"name":"leamiko","xing":"lin"}];
5. alert(list2[0]["xing"])
6. alert(list2[0].xing)
8. //第二部分
9. var value = {
10.     ”china”:{
11.         ”hangzhou”:{“item”:”1″},
12.         ”shanghai”:{“item”:”2″},
13.         ”chengdu”:{“item”:”3″}
14.     },
15.     ”America”:{
16.         ”aa”:{“item”:”1″},
17.         ”bb”:{“item”:”2″}
18.     },
19.     ”Spain”:{
20.         ”dd”:{“item”:”1″},
21.         ”ee”:{“item”:”2″},
22.         ”ff”:{“item”:”3″}
23.     }
24. };
26. for(var countryObj in value)
27. {
28.     document.write(countryObj + ”:<br />”)
29.     //没用的for(var cityObj in value.countryObj)
30.     for(var cityObj in value[countryObj])
31.     {
32.         document.write(‘    ’ + cityObj + ”<br />”);
33.         for(var itemObj in value[countryObj][cityObj])
34.         {
35.             document.write(“      ”+ itemObj + value[countryObj][cityObj][itemObj] +”<br />”)
36.         }
37.     }
38. }

说明：

countryObj 为value对象的一个属性明，value[countryObj] 为value对象的属性值 这里为一个json对象比如b，value[countryObj][cityObj]为josn对象b的属性值 它也是一个json对象，于是 value[countryObj][cityObj]["item"]便可以取到json对象暂时成为c的值，或者 value[countryObj][cityObj].item。

总之分清是json还是array这是很关键的

1. //第三部分
2. var value2 = {
3.     ”china”:[
4.         {"name":"hangzhou", "item":"1"},
5.         {"name":"shanghai", "item":"2"},
6.         {"name":"sichuan", "item":"3"}
7.     ],
8.     ”America”:[
9.         {"name":"aa", "item":"12"},
10.         {"name":"bb", "item":"2"}
11.     ],
12.     ”Spain”:[
13.         {"name":"cc", "item":"1"},
14.         {"name":"dd", "item":"23"},
15.         {"name":"ee", "item":"3"}
16.     ]
17. };
19. for (var countryObj in value2)
20. {
21.     document.write(countryObj + ”:<br />”)
22.     for (var cityObj in value2[countryObj])
23.     {
24.         //可以用document.write(“  ” + value2[countryObj][cityObj].item + ”<br />”);
25.         document.write(cityObj + ”  ” + value2[countryObj][cityObj]["name"] + ”<br />” );
26.     }
27. }

说明：

countryObj 为value2对象的属性名，value2[countryObj] 为value2对象属性值 在本例中它是一个数组，cityObj 是数组的一个元素,它又是另外一个json对象，于是,value2[countryObj][cityObj]["name"]就访问到该对象的 name的属性值，也可以通过 value2[countryObj][cityObj].name 来访问该属性值。

1. //第四部分
2. var value2 = {
3.     ”china”:[
4.         {"name":"hangzhou", "item":"1"},
5.         {"name":"shanghai", "item":"2"},
6.         {"name":"sichuan", "item":"3"}
7.     ],
8.     ”America”:[
9.         {"name":"aa", "item":"12"},
10.         {"name":"bb", "item":"2"}
11.     ],
12.     ”Spain”:[
13.         {"name":"cc", "item":"1"},
14.         {"name":"dd", "item":"23"},
15.         {"name":"ee", "item":"3"}
16.     ]
17. };
19.     for (var countryObj in value2)
20.     {
21.         document.write(countryObj + ”:<br />”)
22.         //document.write(“  ” + value2[countryObj].length);
23.         for (var i = 0;i < value2[countryObj].length; i++)
24.         {
25.             document.write(“  ” + value2[countryObj][i]["name"] + ”<br />”);
26.         }
27.     }

说明：

countryObj value2对象的属性名，value2[countryObj] 属性值 本例中是一个数组，value2[countryObj].length 数组的长度，value2[countryObj][i]数组的项 == json对象。

value2[countryObj][i]["name"] 取得name的值，也可以用value2[countryObj][i].name 来取得name的值。

 

将后台程序(如php)发送过来的json数据转化为javascript的数组或者对象的方法十分简单，代码如下：

JavaScript代码

1. // 假设后台发送的json数据为 ’{a:2,b:1}’ 存储于str中
2. var data = eval( ’(‘ + str + ’)' );

然而想将一个javascript对象转化为json格式的字符串却并不那么简单，特别是对象的属性值递归包含一个对象时(如 var obj={a:[2,3],b:{m:[3,4],n:2} } ),那么有没有什么方法将obj转化为json格式的字符串呢？

当然你可以自己写一个函数，递归遍历一个对象并将其转化为json格式的字符串，对于大部分人来说这有些困难并容易出错。幸好已经有人做好了这件事情，你只用包含一段javascript代码即可。

使用方法：

1. <!doctype html>
2. <html>
3. <body>
4. <script src=”json2.js”></script>
5. <script>
6. var obj={a:[2,3],b:{m:[3,4],n:2} };
7. var jsonStr = JSON.stringify( obj );
8. alert(jsonStr);
9. //将显示 {“a”:[2,3],”b”:{“m”:[3,4],”n”:2}}
10. </script>
11. </body>
12. </html>

假如有两个变量，我要将a转换成字符串，将b转换成JSON对象：

JavaScript代码

1. var a={“name”:”tom”,”sex”:”男”,”age”:”24″};
2. var b=’{“name”:”Mike”,”sex”:”女”,”age”:”29″}’;

在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和 parse()方法。JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式；

上面的转换可以这么写：

1. var a={“name”:”tom”,”sex”:”男”,”age”:”24″};
2. var b=’{“name”:”Mike”,”sex”:”女”,”age”:”29″}’;
3. var aToStr=JSON.stringify(a);
4. var bToObj=JSON.parse(b);
5. alert(typeof(aToStr));  //string
6. alert(typeof(bToObj));  //object

JSON.stringify()

ie8(兼容模式),ie7和ie6没有JSON对象，不过http://www.json.org/提供了一个json.js,这样ie8(兼 容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在https://github.com /douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。ie8(兼容模式),ie7和ie6可以使用 eval()将字符串转为JSON对象：

JavaScript代码

1. var c=’{“name”:”Mike”,”sex”:”女”,”age”:”29″}’;
2. var cToObj=eval(“(“+c+”)”);
3. alert(typeof(cToObj));

jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json )，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript （JSON）对象。当然如果有兴趣可以自己封装一个jQuery扩展，jQuery.stringifyJSON(obj)将JSON转为字符串。

JSON.stringify(jsonobj)，本来是最简便的方法，可是存在浏览器兼容问题（仅适用于IE8+，Chrome 1+，FF 3+）。下面再介绍一个方法：

1. var O2String = function (O) {
2.        //return JSON.stringify(jsonobj);
4.        var S = [];
5.        var J = ”";
6.        if (Object.prototype.toString.apply(O) === ’[object Array]‘) {
7.            for (var i = 0; i < O.length; i++)
8.                S.push(O2String(O[i]));
9.            J = ’[' + S.join(',') + ']‘;
10.        }
11.        else if (Object.prototype.toString.apply(O) === ’[object Date]‘) {
12.            J = ”new Date(“ + O.getTime() + ”)”;
13.        }
14.        else if (Object.prototype.toString.apply(O) === ’[object RegExp]‘ || Object.prototype.toString.apply(O) === ’[object Function]‘) {
15.            J = O.toString();
16.        }
17.        else if (Object.prototype.toString.apply(O) === ’[object Object]‘) {
18.            for (var i in O) {
19.                O[i] = typeof (O[i]) == ’string’ ? ’”‘ + O[i] + ’”‘ : (typeof (O[i]) === ’object’ ? O2String(O[i]) : O[i]);
20.                S.push(i + ’:' + O[i]);
21.            }
22.            J = ’{‘ + S.join(‘,’) + ’}';
23.        }
25.        return J;
26. };

使用方法也很简单：

1. var jsonStr = O2String(
2.              [
3.                  {
4.                      "Page": "plan",
5.                      "Custom":
6.                      [
7.                          {
8.                              "ItemName": "CustomLabel1",
9.                              "ItemContent": 1,
10.                              "IsItem": true,
11.                              "ItemDate": new Date(1320774905467),
12.                              "ItemReg": /[\w]*?/gi,
13.                              ”ItemFunc”: function () { alert(“ItemFunc”); }
14.                          },
15.                          {
16.                              ”ItemName”: ”CustomLabel1″,
17.                              ”ItemContent”: 1,
18.                              ”IsItem”: true,
19.                              ”ItemDate”: new Date(1320774905467),
20.                              ”ItemReg”: /[\w]*?/gi,
21.                              ”ItemFunc”: function () { alert(“ItemFunc”); }
22.                          }
23.                      ]
24.                  },
25.                  {
26.                      ”Page”: ”project”,
27.                      ”Custom”:
28.                      [
29.                          {
30.                              "ItemName": "CustomLabel2",
31.                              "ItemContent": 2,
32.                              "IsItem": false,
33.                              "ItemDate": new Date(1320774905467),
34.                              "ItemReg": /[\w]*?/gi,
35.                              ”ItemFunc”: function () { alert(“ItemFunc”); }
36.                          },
37.                          {
38.                              ”ItemName”: ”CustomLabel2″,
39.                              ”ItemContent”: 2,
40.                              ”IsItem”: false,
41.                              ”ItemDate”: new Date(1320774905467),
42.                              ”ItemReg”: /[\w]*?/gi,
43.                              ”ItemFunc”: function () { alert(“ItemFunc”); }
44.                          }
45.                      ]
46.                  }
47.              ]
48.          );
49.          alert(jsonStr);
50.          var jsonObj = eval(“(“ + jsonStr + ”)”);
51. alert(jsonObj.length);