jquery - 检测是否使用 Node.js 进行 ajax 调用(刷新页面而不重新加载)

Question

我有一个网站，我想更改页面而不重新加载页面，只需刷新内容。我正在使用express.js 框架。这是更改页面的代码:

$("a").on('click', function(e) {
    pageUrl = $(this).attr('href');
    e.preventDefault();

    $.ajax({
        url: pageUrl, success: function(data) {
            $('#main-content').html(data);            
        }
    });
});

这是我的“基本” Jade 布局:

doctype html
    html(lang="fr")
        head
            title test
            block head
        body
            #main-content
                block body

            script(src="/js/vendor/jquery.js")

如何使用express.js检测ajax调用，以便我只能加载“ block 体”而不是所有布局。

我认为应该是这样的:

if !ajax
    doctype
    ...
    block body
else
    block body

谢谢。

Answer 1

由于您在单击 a 元素时向 DOM 添加了新内容，因此单击处理程序将不适用于新添加的 a 元素。

这不是关于NodeJS，而是关于你的jQuery代码。您应该在 body 或 document 上添加点击处理程序，因为点击 a 元素时它不会发生变化。

$(document).on('click', "a", function(e) {
    pageUrl = $(this).attr('href');
    e.preventDefault();    
    $.ajax({
        url: pageUrl, success: function(data) {
            $('#main-content').html(data);            
        }
    });
});

有一个解决方案可以在 another SO answer 上检查 Express.js 中的 AJAX 调用.