jquery - 带有 Node JS Jade和Ajax的静态导航栏页脚

单击导航栏中的链接时，我试图在静态导航栏和页脚之间呈现动态内容，但是每次单击链接时，它都会复制包括导航栏和页脚的内容。我正在使用带有express和jade模板引擎的节点。

这是我（简体）最顶级的玉器文件。

doctype html
html
    head
        title= title
        // { links }
    body
        block navbar
            #navLinks.nav.navbar-nav
                    a(href='/', id='home') Home
                    a(href='/ourteam', id='team') Our Team
                    a(href='/blog', id='blog') Blog
        #pageBody
            block content
        block footer
            // { footer content }
    // { scripts }

我的jQuery AJAX脚本：

$('#navLinks').on('click', 'a', function(event) {
    event.preventDefault();
    console.log("Hello world");

    var url = $(this).attr('href');

    updatePage(url);

});

function updatePage(url) {

    var pageBody = $('#pageBody');

    $.ajax({
        type: 'GET',
        url: url,
        dataType: 'html'
    }).done(function(html) {
        console.log(html);
        pageBody.html(html);
    });
}

问题是，每当我单击导航栏中的任何链接时，它都会复制#pageBody div中的导航栏。我假设这是因为路由器路由到的内容文件扩展了我的顶级文件。我一直在网上寻找答案，但找不到任何解决方案。

任何建议将不胜感激。

最佳答案

您自己说了“假设是因为内容文件...扩展了我的顶级文件”，从而给出了答案。 @jraede在询问什么阻止了您加载局部文件时绝对正确。

全面了解：您的路线显然是在调用可呈现“经典”全页html响应的操作。因此，您的特定玉器模板可能会扩展“最顶部”的布局文件，如问题中引用的代码所示。直接在浏览器中直接请求（例如http://your-project.tld/ourteam）非常好。

但是现在您只想呈现部分内容，并通过ajax / xhr仅传输部分html代码，最终仅替换#pageBody div中的html。实现此目的的一种方法是定义其他路线/动作和玉器模板。尝试以下食谱：


创建部分模板partials/ourteam-content.jade。
仅将相关内容放入其中（从ourteam.jade中的块内容复制），不要扩展主布局，不要
在此处使用块定义。
为了保持整洁，请修改原始的ourteam.jade，仅在块定义的下方添加新创建的部分模板：

block content
  include patials/ourteam-content

定义另一个路线/动作并将其命名为/ourteam-content。
在app.get("ourteam-content", ...)上仅呈现partials/ourteam-content模板。
重新路由您对“我们的团队”的ajax请求以查询ourteam-content。


我希望这有助于将您推向正确的方向！