gpt4 book ai didi

javascript - 如何使 PJAX 与 Express 和 EJS 一起工作?

转载 作者:行者123 更新时间:2023-11-29 10:05:16 30 4
gpt4 key购买 nike

好的,来自菜鸟之地的问题。但我一直试图让 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>

最佳答案

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

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

您需要使用 http header "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');

一旦加载了 express...

app.use(pjax());

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


在我使用 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>

<% } %>

关于javascript - 如何使 PJAX 与 Express 和 EJS 一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44698959/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com