AJAX 实现导航内容刷新

2019独角兽企业重金招聘Python工程师标准>>>

实现类似于下图点击导航实现菜单内容局部刷新，可以考虑使用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>

现在看下演示效果：

          

转载于:https://my.oschina.net/u/3460260/blog/915494