如何使PJAX与Express和EJS一起使用?

Nna*_*ugo 3 javascript express pjax

好的,从noob那里提问。但是我一直在尝试使pjax工作一段时间,而且似乎没有任何效果。我得到的最好的成绩是对终端中的流程的认可,但是当我单击链接时,它会将我带到整个其他页面,而不是在指定的div中显示其内容。

我还提供了Chris Wanstrath的pjax源代码的链接。似乎没有任何作用。

//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');
Run Code Online (Sandbox Code Playgroud)
 <li><a data-pjax="#pjax-container" href="/schedule">Schedule</a></li>
 
 <div id="pjax-container"> 
 </div>
Run Code Online (Sandbox Code Playgroud)

Tri*_*cky 5

我发现pjax可以正确设置,但是如果您发送<html>带有有效负载的标记,则仍然可以重新加载页面,然后触发重新加载-也许当您发出请求时,这就是为什么页面要加载的原因?

服务器失败请求的默认超时也设置为约600ms,因此在下面的代码中,我将默认超时设置为5000ms。

您将需要服务器端使用"X-PJAX"pjax附加到标头的http标头区分请求是对文档的一部分还是对整个文档。

这是我使用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();
    };
};
Run Code Online (Sandbox Code Playgroud)

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

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

并在快递加载后...

app.use(pjax());

现在,您将在应用程序和视图层中都使用变量


就我而言,使用EJS模板引擎我做了类似的事情...

//schedule.ejs:
<%- include('includes/header') %>
<h1><%= title %></h1>
<%- include('includes/footer') %>
Run Code Online (Sandbox Code Playgroud)

-

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

        <%- include('menu') %>

        <div id="pjax-container">
<% } %>
Run Code Online (Sandbox Code Playgroud)

-

//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>

<% } %>
Run Code Online (Sandbox Code Playgroud)