AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通俗的說就是有時候我們只需要更新一個頁面的一部分數據不需要更新全部數據，這個時候我們就能使用ajax了，它就是爲了完成這個功能的。
1，ajax我們這裏講的是注重實際的應用，從舉例開始：
比如我們想從項目的json文件裏讀取json數據，
首先在html頁面裏：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js">
</script>
<script type="text/javascript" src="js/json.js" defer="defer">
</script>
</head>
<body>
<ul id="menu"></ul>
</body>
</html>[ {"text":"菜單一",
"child":[
{"text":"子菜單1","url":"地址1"},
{"text":"子菜單2","url":"地址1"},
{"text":"子菜單3","url":"地址1"}
]
},
{"text":"菜單er",
"child":[
{"text":"子菜單21","url":"地址2"},
{"text":"子菜單23","url":"地址2"},
{"text":"子菜單24","url":"地址2"}
]
},
{"text":"菜單三",
"child":[
{"text":"子菜單31","url":"地址3"},
{"text":"子菜單32","url":"地址3"},
{"text":"子菜單33","url":"地址3"}
]
}
]
這裏我們用到jQuery和ajax，在js裏的代碼：
$(document).ready(function(){
$.ajax({
url:"dates/data.json",
success:function(rs){
$.each(rs, function(i,n) {
$("#menu").append($("<li id='L"+i+"'>"+n.text+"<ul></ul></li>"));
});
$("#menu li").click(function(){
var id=this.id;
var txt=this.innerText.trim();
$.ajax({
url:"dates/data.json",
success:function(rs){
$.each(rs, function(i,n) {
if (n.text.trim()==txt) {
$.each(n.child,function(j,m) {
$("#"+id+" ul").append($("<li></li>").html("<a href='"+m.url+"'>"+m.text+"</a>"));
});
}
});
}
});
});
}
});
});
注意html頁面裏要引用jQuery和自己寫js文件。
下面是下載鏈接：
