1. JSON(JavaScript Object Notation): javaScript對象表示法；
是存儲和交換文本信息的語法，比xml更小，更快，更易解析。
2. JSON基本書寫格式 ： 名稱/值對。 例如： "Student":"Tom"
Json值可以是：
- 數字（整數或浮點數）
- 字符串（在雙引號中）
- 邏輯值（true或者false）
- 數組（在方括號中）
- 對象（在花括號中）
- null
例如（對象）：{"name":"tom","age":23}
（數組）：
1 {
2 "張三":[
3 {"姓":"張"},
4 {"名","三"}，
5 {"age",23}
6 ]
7 }
注意： ① 寫JSON數組其實和java中String數組形式差不多，值得注意的是，JSON是名稱/值對的。
② 其中出現的字符串形式都是用雙引號，不能像js中雙引號單、引號都能用。
③ 無論數組還是對象，最后一個數值后面都不能有逗號，不然會出現問題。
經過我的在谷歌瀏覽器控制台測試JSON數據，對於②和③他都不會報什么錯誤，都能讀取出來，但是我通過jquery中ajax獲取JSON文件中數據時，會出現錯誤，具體原因，暫時無法解答。
下面是在谷歌瀏覽器控制台調試結果（注意都不符合上面的②和③）。
json數據的基本調用就如圖中所寫的,就是對數組和對象的調用。
3. 通過具體例子對Json文件的獲取。
創建一個.json文件。
{ "list":[
{ "name":"c" , "url":"demo2.html"},
{ "name":"list22" , "url":"demo2.html"},
{ "name":"list33" , "url":"demo2.html"},
{ "name":"list44" , "url":"demo2.html"},
{ "name":"list55" , "url":"demo2.html"},
{ "name":"list66" , "url":"demo2.html"}
],
"list1":[
{ "name":"我是第二個ul的1" , "url":"demo2.html"},
{ "name":"我是第二個ul的2" , "url":"demo2.html" },
{ "name":"我是第二個ul的3" , "url":"demo2.html" },
{ "name":"我是第二個ul的4" , "url":"demo2.html" },
{ "name":"我是第二個ul的5" , "url":"demo2.html"},
{ "name":"我是第二個ul的6" , "url":"demo2.html"}
]
}
在html中寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script> //引入jquery庫
</head>
<body>
<div class="div">
<ul id="nav1" class="nav"> // 用於存放第一個ul數據的，里面的li標簽即數據都是js生成的。
<span style="color:red;">this is nav1</span>
</ul>
<ul id="nav2" class="nav"> //存放第二個ul數據
<span style="color:red;">this is nav2</span>
</ul>
</div>
<script type="text/javascript">
$(function() { // 頁面加載之后調用
$.ajax({
type: "get", //請求方式為get，也可以是設置為post
url: "listData.json", //所要獲取的json文件相對地址，注意不要寫錯了，我這里放在同一個目錄下的
async: true, //是否為異步請求，ture為異步請求，false為同步請求
success: function(d) { //當請求之后調用。傳入返回后的數據，以及包含成功代碼的字符串
alert(d); //這里會彈出json文件中所有的字符串數據，如圖3-1
var d = eval("(" + d + ")"); // 將json字符串數據解析成對象
alert(d) //彈出： 如圖3-2
var str = "<span style='color:red;'>this is nav1</span>";
var str1 = "<span style='color:red;'>this is nav2</span>";
var arr1 = d.list1;
var arr2 = d.list;
if (arr1 != null) {
for (var i = 0; i < arr1.length; i++) { //這里面都是創建li並賦值
str = str + "<li><a href='http://www.baidu.com'>" + arr1[i].name + "</a></li>";
}
$("#nav1").html(str);
}
if (arr2 != null) {
for (var j = 0; j < arr2.length; j++) {
str1 += "<li><a href='" + arr2[j].url + "'>" + arr2[j].name + "</a></li>";
}
$("#nav2").html(str1);
}
}
});
});
</script>
</body>
</html>
視圖：
圖3-1
圖3-2
最后的效果如下圖：
氣質ul列表也可以根據Css其他樣式去設置，達到更美觀的效果。