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)
我发现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)
| 归档时间: |
|
| 查看次数: |
293 次 |
| 最近记录: |