如何使 PJAX 与 Express 和 EJS 一起工作？

Question

好的，来自菜鸟之地的问题。但我一直试图让 pjax 工作一段时间，但似乎没有任何效果。我得到的最好结果是在终端中确认了该过程，但是当我单击 link 时，它会将我带到整个其他页面，而不是在指定的 div 中显示其内容。

而且我还在 Chris Wanstrath 的 pjax 源代码中包含了 link。似乎没有任何效果。

//The schedule.js file 
router.get('/', function(req, res) {
  res.render('schedule', { title: 'Schedule' });
});

//The jQuery end of the line
$(document).pjax('a[data-pjax]', '#pjax-container');

 <li><a data-pjax="#pjax-container" href="/schedule">Schedule</a></li>
 
 <div id="pjax-container"> 
 </div>

Answer 1

我发现 pjax 可以正确设置并且仍然重新加载页面如果你发送一个 <html> 标签和有效负载然后它触发重新加载 - 也许当你发出请求时这就是你的页面的原因正在加载？

此外，对服务器的失败请求的默认超时设置为大约 600 毫秒，因此在下面的代码中我已将默认值提高到 5000 毫秒。

您需要使用 pjax 附加到 header 的 http header "X-PJAX" 区分服务器端请求是针对文档的一部分还是完整文档。 =19=]

这是我使用 nodejs/express 5/pjax 解决这个问题的方法

使用以下内容创建一个名为 pjax-helper.js 的帮助程序文件

'use strict';

module.exports = function() {
    return function pjax( req, res, next ) {
        if( req.header( 'X-PJAX' ) ) {
            req.pjax = true;
            res.locals.pjax = true;
        } else {
            req.pjax = false;
            res.locals.pjax = false;
        }
        next();
    };
};

然后在您的应用中您可以要求该文件

var pjax = require('./include/pjax-helper');

并在加载快递后...

app.use(pjax());

现在您的应用程序和视图层都可以使用该变量

在我使用 EJS 模板引擎的情况下，我做了类似的事情...

//schedule.ejs:
<%- include('includes/header') %>
<h1><%= title %></h1>
<%- include('includes/footer') %>

--

//includes/header.ejs
<% if(locals.pjax==false) { %>
<!DOCTYPE html>
<html lang="en">
    <head> ... </head>
    <body>

        <%- include('menu') %>

        <div id="pjax-container">
<% } %>

--

//includes/footer.ejs
<% if(locals.pjax==false) { %>
</div><!--/#pjax-ccontainer-->

<script src="/js/pjax.js"></script>
<script>
    $(document).pjax('a.pjax', '#pjax-container', {timeout: 5000});
    $(document).on('pjax:send', function() { $('#loading').show(); });
    $(document).on('pjax:complete', function() { $('#loading').fadeOut(); });
</script>

</body>
</html>

<% } %>

如何使 PJAX 与 Express 和 EJS 一起工作？

How to make PJAX work with Express and EJS?

javascript

express

pjax