此示例显示如何使用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页面。