• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

Express中使用pjax實現頁面無刷新加載

作者:日期:2017-07-06 13:51:55 點擊:468

 先看下pjax的浏覽器兼容版本

 

創建項目,引入文件

創建一個express項目,引入jquery, jquery-pjax 文件

寫一個攔截器

var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
next();
} else {
//如果不是pjax請求的話直接返回布局模板
res.render('layout', { title: '首頁' });
}
};
說明:在要使用pjax的路由中加上攔截器,不用pjax的,就不要加,攔截器的作用是判斷是不是pjax請求,是就直接去加載數據,生成頁面,填充到頁面裏,不是的話,就加載一下模板,這樣可以防止加載再次模板,在layout.ejs裏會通過$.pjax.reload(‘#container’)去加載頁面內容,這也就是直接在浏覽器裏輸入網址也會加載數據的原因
//...
app.get('/', pjaxFilter, Index.index);
app.get('/logout', Index.logout);
//...

頁面實現

//layout.ejs
<!DOCTYPE html>
<html>
<head>
<title>首頁</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<link rel='stylesheet' href='/stylesheets/style.css'/>

<script src="/javascripts/jquery.pjax.min.js"></script>
</head>
<body>
<div class="box">
<h1 class="title"><a href="/" data-pjax>DEMO</a></h1>
<div id="container"></div>
</div>
<script>
$(function () {
$(document).pjax('a[data-pjax]', '#container');
$.pjax.reload('#container');

// $(document).on('pjax:success', function (data, status, xhr, options) {
// });
})
</script>
</body>
</html>

說明:github上介紹給的demo是直接給 a 標簽加上pjax事件的,這裏我用data-pjax做了個區別,目的是跟普通a標簽區別開,要用pjax無刷新加載的就加上data-pjax就可以了,不需要的直接寫個a標簽就可以了

填充頁面實現

//路由
exports.index = function(req, res) {
res.render('', {
name: 'word!',
layout: req.get('X-PJAX')
})
}
<div>hello <%=name%></div>

說明:我這裏用的是ejs模板,路由返回裏加入的layout屬性是爲了判斷是否引用layout.ejs頁面的,layout:false即爲不引用,所以這裏加上了一個通過判斷是不是pjax請求的方式,如果是pjax請求,就引用模板,然後在layout.ejs裏有個$.pjax.reload(‘#container’)操作,會更新id=’container’裏的內容

其它相關

  • 在加載的頁面裏(非布局頁面)也可以使用data-pjax,來讓a標簽有pjax事件
  • 如果加載頁面失敗了,可能會出現重複加載頁面的現象,這個要把錯誤處理好,就不會出現了
  • 在加載的頁面裏(非布局頁面)如果有ajax操作,刪除了數據,可以直接使用$.pjax.reload('#container')來無刷新的重新加載當前頁面(比如:$.get(‘’, function(data){if(data.code === 200) {$.pjax.reload(‘#container’)}});
  • 這裏用的是nodejs裏的express框架,它只是一個web框架,所以pjax跟express沒有關系,相同的,在springmvc,beego等框架裏都是可以用的,只是注意跟框架的模板配合好就可以了

上一篇: MongoDB基本命令語句

下一篇: Git基礎知識精講