使用pjax實(shí)現(xiàn)無刷新更改頁面url
我們都知道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ì)介紹了，沒有這方面知識的同學(xué)建議先看一下相關(guān)的資料。
pjax插件封裝了pushState和ajax操作,為我們提供了一個(gè)開發(fā)這這類web應(yīng)用的簡單方法，具體步驟如下：
定義需要局部更新的容器
<div id="container"></div>
初始化pjax，監(jiān)聽URL
$(function(){
// pjax
$(document).pjax('a', '#container');
$.pjax.reload('#container');
})
后端處理pjax請求
后端的處理邏輯是，首先判斷是不是pjax請求，如果是的話，根據(jù)請求參數(shù)返回局部內(nèi)容，否則返回layout布局，然后由`$.pjax.reload('#container');`發(fā)起pjax請求。根據(jù)以上邏輯可以寫出如下代碼：
var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
next();
return;
}
//如果不是pjax請求的話直接返回布局模板
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，請?jiān)L問：jquery-pjax
相關(guān)文章
javascript實(shí)現(xiàn)一個(gè)網(wǎng)頁加載進(jìn)度loading
本篇文章主要介紹了javascript實(shí)現(xiàn)一個(gè)頁面加載進(jìn)度loading的具體步驟以及示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了js實(shí)現(xiàn)黑白div塊畫空心的圖形，畫出矩形、三角形、菱形、圓形，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載
這篇文章主要為大家詳細(xì)介紹了Axios+Spring?Boot實(shí)現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家分享Bootstrap的圖片輪播示例代碼，小伙伴們快來圍觀吧。2015-08-08
html中通過JS獲取JSON數(shù)據(jù)并加載的方法
本篇內(nèi)容主要給大家講了如何通過javascript解析JSON并得到數(shù)據(jù)后添加到HTML中的方法，需要的朋友參考下。2017-11-11
本文記錄下JS中產(chǎn)生標(biāo)識符方式的演變，從ES5到ES6，ES5及其之前是一種方式，只包含兩種聲明（var/function），ES6則增加了一些產(chǎn)生標(biāo)識符的關(guān)鍵字，如 let、const、class。2015-06-06
JavaScript實(shí)現(xiàn)簡單Tip提示框效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單Tip提示框效果,涉及JavaScript響應(yīng)鼠標(biāo)事件針對頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動驗(yàn)證拼圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
微信小程序之ES6與事項(xiàng)助手的功能實(shí)現(xiàn)
本篇文章主要介紹了微信小程序之ES6與事項(xiàng)助手的功能實(shí)現(xiàn)，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下。2016-11-11
Javascript中toFixed計(jì)算錯(cuò)誤(依賴銀行家舍入法的缺陷)解決方法
這篇文章主要介紹了Javascript中toFixed計(jì)算錯(cuò)誤(依賴銀行家舍入法的缺陷)解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08