亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用pjax實(shí)現(xiàn)無刷新更改頁面url

 更新時(shí)間：2015年02月05日 09:03:55   投稿：hebedich  
pjax=pushState+ajax，相信用過github的同學(xué)都知道，github部分頁面采用了pjax這個(gè)項(xiàng)目來實(shí)現(xiàn)ajax無刷新加載的同時(shí)改變頁面url。一起來學(xué)習(xí)一下這個(gè)插件吧。

我們都知道ajax給瀏覽器帶來了異步加載的能力，在數(shù)據(jù)校驗(yàn)、局部刷新等方面提升了用戶體驗(yàn)，但同時(shí)存在如下問題：

1. 可以無刷新改變頁面內(nèi)容，但無法改變頁面URL
2. hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問題

為了解決傳統(tǒng)ajax帶來的問題，HTML5里加強(qiáng)了history API，加入了pushState、replaceState接口和popstate事件。這里就不詳細(xì)介紹了，沒有這方面知識(shí)的同學(xué)建議先看一下相關(guān)的資料。

pjax插件封裝了pushState和ajax操作,為我們提供了一個(gè)開發(fā)這這類web應(yīng)用的簡(jiǎn)單方法，具體步驟如下：

定義需要局部更新的容器

<div id="container"></div>
初始化pjax，監(jiān)聽URL

復(fù)制代碼 代碼如下:

$(function(){
// pjax
$(document).pjax('a', '#container');
$.pjax.reload('#container');
})

后端處理pjax請(qǐng)求

后端的處理邏輯是，首先判斷是不是pjax請(qǐng)求，如果是的話，根據(jù)請(qǐng)求參數(shù)返回局部?jī)?nèi)容，否則返回layout布局，然后由`$.pjax.reload('#container');`發(fā)起pjax請(qǐng)求。根據(jù)以上邏輯可以寫出如下代碼：

復(fù)制代碼 代碼如下:

var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
next();
return;
}
//如果不是pjax請(qǐng)求的話直接返回布局模板
res.render('layout', { title: 'Pjax simple demo' });
};
router.get('/', pjaxFilter, function(req, res) {
res.render('index');
});
router.get('/poem/:id', pjaxFilter, function(req, res) {
var poemId = req.params.id;
res.render('poem/' + poemId);
})

完整代碼：pjax-demo

這只是pjax最基礎(chǔ)的功能，pjax提供了豐富的api，請(qǐng)?jiān)L問：jquery-pjax

相關(guān)文章

最新評(píng)論