6

$().load()我想使用 jQuery/AJAX功能重新加载我网站的内容区域。但我的问题是，无论您的输入网址如何，都需要在所有页面上显示header和。footer

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

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

4

3 回答 3

5

页面.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);
});

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

于 2012-04-15T22:31:52.860 回答
1

看起来你可以有几个不同的选择。如果用户正在访问您的网站但没有转到第一页，那么您只需检查以验证页眉和页脚在页面加载后是否显示。如果未找到，则应创建初始站点布局。您甚至可以决定以这种方式构建第一页 (index.php)，以便以相同的方式处理每个页面

$(document).ready(function() {
    // If an element of id "header" isn't found in the DOM
    if (!$("#header").length() > 0) {
        // Generate the header and insert it as the first element of the DOM
    }
    if (!$("#footer").length() > 0) {
        // Generate the footer and append it to the last element of the DOM
    }
});

毫无疑问，您也可以接受其他解决方案；您可能在每个页面上都有一个包含，只有在通过 GET 而不是 AJAX 请求请求该页面时才包含该页面。

于 2012-04-15T22:42:29.790 回答
0

您正在寻找的技术称为 Hijax，您可以在其中拦截来自 AJAX 请求的响应，并且只提取您打算在呈现的页面上替换的 DOM 部分。

一般的想法是实际的 URL 本身仍然会返回完整的页面内容，因此如果请求来自新访问者，则整个 DOM 将加载，但如果请求来自用户单击页面上的 hijaxed 链接如果指定了 CSS 选择器，则仅替换选择器标识的页面部分。

看看Hijax - jQuery 插件。实际站点本身是使用插件构建的，如果您查看网络选项卡并查看 Chrome 或 Firebug 工具中的检查器，您可以看到内容已被换出，而无需替换菜单、标题或其他元素没有被替换。

于 2012-04-15T22:35:27.517 回答