|
1. JSON(JavaScript Object Notation): javaScript對(duì)象表示法,； 是存儲(chǔ)和交換文本信息的語(yǔ)法,，比xml更小,，更快，更易解析,。 2. JSON基本書(shū)寫(xiě)格式 ： 名稱(chēng)/值對(duì),。 例如： "Student":"Tom" Json值可以是：
例如（對(duì)象）：{"name":"tom","age":23} （數(shù)組）：  1 {
2 "張三":[
3 {"姓":"張"},
4 {"名","三"}，
5 {"age",23}
6 ]
7 }
注意： ① 寫(xiě)JSON數(shù)組其實(shí)和java中String數(shù)組形式差不多,，值得注意的是,，JSON是名稱(chēng)/值對(duì)的。 ② 其中出現(xiàn)的字符串形式都是用雙引號(hào),，不能像js中雙引號(hào)單,、引號(hào)都能用,。 ③ 無(wú)論數(shù)組還是對(duì)象，最后一個(gè)數(shù)值后面都不能有逗號(hào),，不然會(huì)出現(xiàn)問(wèn)題,。 經(jīng)過(guò)我的在谷歌瀏覽器控制臺(tái)測(cè)試JSON數(shù)據(jù)，對(duì)于②和③他都不會(huì)報(bào)什么錯(cuò)誤,，都能讀取出來(lái),，但是我通過(guò)jquery中ajax獲取JSON文件中數(shù)據(jù)時(shí)，會(huì)出現(xiàn)錯(cuò)誤,，具體原因,，暫時(shí)無(wú)法解答。
下面是在谷歌瀏覽器控制臺(tái)調(diào)試結(jié)果（注意都不符合上面的②和③）,。
json數(shù)據(jù)的基本調(diào)用就如圖中所寫(xiě)的,就是對(duì)數(shù)組和對(duì)象的調(diào)用,。
3. 通過(guò)具體例子對(duì)Json文件的獲取。 創(chuàng)建一個(gè).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":"我是第二個(gè)ul的1" , "url":"demo2.html"},
{ "name":"我是第二個(gè)ul的2" , "url":"demo2.html" },
{ "name":"我是第二個(gè)ul的3" , "url":"demo2.html" },
{ "name":"我是第二個(gè)ul的4" , "url":"demo2.html" },
{ "name":"我是第二個(gè)ul的5" , "url":"demo2.html"},
{ "name":"我是第二個(gè)ul的6" , "url":"demo2.html"}
]
}
在html中寫(xiě)： <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script> //引入jquery庫(kù)
</head>
<body>
<div class="div">
<ul id="nav1" class="nav"> // 用于存放第一個(gè)ul數(shù)據(jù)的,，里面的li標(biāo)簽即數(shù)據(jù)都是js生成的。
<span style="color:red;">this is nav1</span>
</ul>
<ul id="nav2" class="nav"> //存放第二個(gè)ul數(shù)據(jù)
<span style="color:red;">this is nav2</span>
</ul>
</div>
<script type="text/javascript">
$(function() { // 頁(yè)面加載之后調(diào)用
$.ajax({
type: "get", //請(qǐng)求方式為get,，也可以是設(shè)置為post
url: "listData.json", //所要獲取的json文件相對(duì)地址,，注意不要寫(xiě)錯(cuò)了，我這里放在同一個(gè)目錄下的
async: true, //是否為異步請(qǐng)求,，ture為異步請(qǐng)求,，false為同步請(qǐng)求
success: function(d) { //當(dāng)請(qǐng)求之后調(diào)用。傳入返回后的數(shù)據(jù),，以及包含成功代碼的字符串
alert(d); //這里會(huì)彈出json文件中所有的字符串?dāng)?shù)據(jù),，如圖3-1
var d = eval("(" + d + ")"); // 將json字符串?dāng)?shù)據(jù)解析成對(duì)象
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++) { //這里面都是創(chuàng)建li并賦值
str = str + "<li><a + 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
最后的效果如下圖： 氣質(zhì)ul列表也可以根據(jù)Css其他樣式去設(shè)置，達(dá)到更美觀的效果,。
|
|
|
來(lái)自： _明心見(jiàn)性_ > 《JQuery》
