AJAX 實現導航內容刷新

實現相似於下圖點擊導航實現菜單內容局部刷新，能夠考慮使用AJAX 來實現。

在如下示例中，有 a 和 b 兩個導航菜單，點擊 a 則顯示 a.html 的頁面內容， 點擊 b 則顯示 b.html 內容。

首先準備三個頁面，index.html , a.html , b.html。

HTML 中給出頁面結構，放置導航欄的 div 和顯示菜單內容 的 div。

<div id="nav">
			<ul>
				<li><a href="javascript:;" page="a.html">導航a</a></li>
				<li><a href="javascript:;" page="b.html">導航b</a></li>
			</ul>
		</div>
		<div id="navContent" style="width:800px; height:400px; border:1px solid red">
		</div>

而後給 a 標籤添加點擊事件

$("a").click(function(){
	          // 獲取請求頁面
		      var url = $(this).attr("page"); 
	        $.ajax({
                    type: "post",
                    dataType: "html",
                    url: url,
                    success: function(res) {
		          // 添加頁面內容
                        $("#navContent").html(res);
                    }
                });
	      });

a.html 頁面內容以下：

<div>
	a頁面內容
</div>
<script>
	alert("a");
</script>

如今看下演示效果：