Question

好的，来自土豆的问题。但我一直试图让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');

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

Answer 1

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

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

您需要使用http标头"X-PJAX"来区分服务器端，无论请求是针对部分文档还是完整文档，pjax会附加到标头。

以下是我使用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一起使用？

1 个答案: