$().load()而不是加载整个页面,但需要在所有页面上保留菜单

Question

我想用jQuery/AJAX $().load()函数重新加载我网站的内容区域.但我的问题是,header和footer需要的所有网页上,无论您的输入网址来显示.

我的网站是使用模板构建的,所以我首先想到的是删除布局输出的独特内容上方和下方,因为我会阻止ie.菜单显示两次.但我意识到如果用户没有通过第一页进入我的网站,让我们说index.php,他将永远不会看到页眉或页脚只是一个没有样式的文本页面.

我的问题是,你将如何解决这个问题？允许使用JavaScript(+ jQuery)和HTML5.

Answer 1

page.php文件:

<div id="header"></di>
<div id="mainContent"></div>
<div id="footer"></div>

JS:

$("#content").load("page.php #mainContent"); //that will only load mainContent

要么:

$.get('page.php', function (data) {
    data = $(data).find('#mainContent').html();
    $("#content").empty().append(data);
});

有关更多信息,请参阅有关load()和页面片段的jQuery文档中的部分