1 、首先還是要說一下json是啥，有啥用
JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是存儲和交換文本信息的語法
爲什麼使用 JSON？
對於 AJAX 應用程序來說，JSON 比 XML 更快更易使用：
使用 XML
- 讀取 XML 文檔
- 使用 XML DOM 來循環遍歷文檔
- 讀取值並存儲在變量中
使用 JSON
-
讀取 JSON 字符串
-
用 eval() 處理 JSON 字符串
2**、然後老規矩上段基礎代碼先看看模樣加深一下認識**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下</title>
</head>
<body>
<h2>JavaScript 創建 JSON 對象</h2>
<p>
網站名稱: <span id="jname"></span><br />
網站地址: <span id="jurl"></span><br />
網站 slogan: <span id="jslogan"></span><br />
</p>
<script>
var JSONObject= {
"name":"百度",
"url":"www.baidu.com",
"slogan":"百度，人類進步的絆腳石！"
};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jurl").innerHTML=JSONObject.url
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
</body>
</html>
JSON理解起來比ajax要簡單些，畢竟說白了他主要的功能就是儲存和交換信息，所以把學習json的重點放在如何儲存和信息轉換上，是重點也是難點。
接下來慢慢剖析一波JSON
3、JSON語法
- 語法規則：
①數據在名稱/值對中②數據由逗號分隔③大括號保存對象④中括號保存數組
JSON 數據的書寫格式是：名稱/值對。
"name" : "百度"
名稱/值對包括字段名稱（在雙引號中），後面寫一個冒號，然後是值
- JSON 值
①數字（整數或浮點數）{ "age":30 }
②字符串（在雙引號中）
③邏輯值（true 或 false）{ "flag":true }
④數組（在中括號中）
{
"sites": [
{ "name":"百度" , "url":"www.baidu.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
⑤對象（在大括號中）{ "name":"百度" , "url":"www.baidu.com" }
⑥null
{ "runoob":null }
4、JSON對象：
JSON 對象使用在大括號({})中書寫。
對象可以包含多個 key/value（鍵/值）對。
key 必須是字符串，value 可以是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。
key 和 value 中使用冒號(:)分割。
每個 key/value 對使用逗號(,)分割。
-
訪問對象值
<head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>你可以使用點號（.）來訪問 JSON 對象的值：</p> <p id="demo"></p> <script> var myObj, x; myObj = { "name":"runoob", "alexa":10000, "site":null }; x = myObj.name; document.getElementById("demo").innerHTML = x; </script> </body> </html>
首先看這段代碼，定義一個json對象，然後注意，這時候就可以調用對象裏的值了，調用的方法就是使用點號（.），代碼段中：x = myObj.name
這裏就成功調用了name的值“runoob”
- 嵌套 JSON 對象
JSON 對象中可以包含另外一個 JSON 對象：
myObj = {
"name":"runoob",
"alexa":10000,
"sites": {
"site1":"www.runoob.com",
"site2":"m.runoob.com",
"site3":"c.runoob.com"
}
}
可以使用點號(.)或者中括號([])來訪問嵌套的 JSON 對象：
x = myObj.sites.site1;// 或者x = myObj.sites["site1"];
可以使用點號(.)來修改 JSON 對象的值：
myObj.sites.site1 = "www.google.com";或者myObj.sites["site1"] = "www.google.com";
可以使用點號(.)來修改 JSON 對象的值：
myObj.sites.site1 = "www.google.com";或者myObj.sites["site1"] = "www.google.com";
可以使用 delete 關鍵字來刪除 JSON 對象的屬性：
delete myObj.sites.site1;或者delete myObj.sites["site1"]
5、JSON 數組
- 數組作爲 JSON 對象
[ “Google”, “Runoob”, “Taobao” ]
JSON 數組在中括號中書寫。
JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。
JavaScript 中，數組值可以是以上的 JSON 數據類型，也可以是 JavaScript 的表達式，包括函數，日期，及 undefined。
- JSON 對象中的數組
對象屬性的值可以是一個數組：
{
"name":"網站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}
可以使用索引值來訪問數組：x = myObj.sites[0];
- 嵌套 JSON 對象中的數組
JSON 對象中數組可以包含另外一個數組，或者另外一個 JSON 對象：
myObj = {
"name":"網站",
"num":3,
"sites": [
{ "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻譯" ] },
{ "name":"Runoob", "info":[ "菜鳥教程", "菜鳥工具", "菜鳥微信" ] },
{ "name":"Taobao", "info":[ "淘寶", "網購" ] }
]
}
使用 for-in 來循環訪問每個數組：
for (i in myObj.sites) {
x += "<h1>" + myObj.sites[i].name + "</h1>";
for (j in myObj.sites[i].info) {
x += myObj.sites[i].info[j] + "<br>";
}
}
可以使用索引值來修改數組值：myObj.sites[1] = "Github";
可以使用 delete 關鍵字來刪除數組元素：delete myObj.sites[1];
6、JSON.parse()
JSON.parse方法用於將JSON字符串轉化成對象
在接收服務器數據時一般是字符串。
我們可以使用 JSON.parse() 方法將數據轉換爲 JavaScript 對象。
先整段代碼看看這個方法的用法：
var jsonStr = '[{"城市":"北京","面積":16800,"人口":1600},
{"城市":"上海","面積":6400,"人口":1800}]';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
運行結果爲（主要區別）：
[{"城市":"北京","面積":16800,"人口":1600}, {"城市":"上海","面積":6400,"人口":1800}]
7、JSON.stringify()
JSON.stringify方法用於將一個值轉爲字符串
在向服務器發送數據時一般是字符串。
我們可以使用 JSON.stringify() 方法將 JavaScript 對象轉換爲字符串。
整段代碼看看用法，其實和JSON.parse()反着
var jsonObj = [
{"城市":"北京","面積":16800,"人口":1600},
{"城市":"上海","面積":6400,"人口":1800}
];
console.log(JSON.stringify(jsonObj));
運行結果爲：
'[{"城市":"北京","面積":16800,"人口":1600}, {"城市":"上海","面積":6400,"人口":1800}]'
其他的json實例後續進行講解