使用JQuery Ajax将静态html页面加载到div标签

此示例显示如何使用JQuery Ajax将静态html页面加载到div标签？

如果要加载静态html页面，则可以使用JQuery Ajax函数。为了使它与具有良好MVC结构的主项目分开，我使用JQuery的Ajax函数来加载那些静态页面。

首先，这是index.html页面上的菜单。

<ul>
	<li><a id="page1" href="#">About</a></li>
	<li><a id="page2" href="#">Community</a></li>
	<li><a id="page3" href="#">Sponsor</a></li>
</ul>
<div id="result" style="clear:both;">
</div>

首先，我们需要包括JQuery库。

<script src =“ http://code.jquery.com/jquery-1.4.min.js” type =“ text / javascript”> </ script>

将以下代码添加到头部。

<script type="text/javascript">
		$(document).ready(function(){
		   $("#page1").click(function(){
		   	$('#result').load('pages/page1.html');
		     //alert("Thanks for visiting!");
		   }); 
 
		   $("#page2").click(function(){
		   	$('#result').load('pages/page2.html');
		     //alert("Thanks for visiting!");
		   });
		 });
	</script>

而已！

当然，您有一个目录/ pages /，其中包含几个要加载的静态html页面。