資訊專欄INFORMATION COLUMN
摘要：在即將度過試用期的時(shí)候，借著今天學(xué)習(xí)的文章，整理一下前段時(shí)間做用戶主頁時(shí)用到的。近期我站的個(gè)人主頁改版，將用戶發(fā)布的各類作品放到一個(gè)頁面上切換，附加篩選功能。在做篩選及翻頁的過程中，我們用到了。
在即將度過試用期的時(shí)候，借著今天學(xué)習(xí)的文章，整理一下前段時(shí)間做用戶主頁時(shí)用到的pjax。
近期我站的個(gè)人主頁改版，將用戶發(fā)布的各類作品放到一個(gè)頁面上切換，附加篩選功能。
在做篩選及翻頁的過程中，我們用到了pjax。即通過ajax獲取數(shù)據(jù)，然后改變url鏈接，這樣用戶可以前進(jìn)后退。就像這樣→
上面的二級導(dǎo)航就是篩選用噠～
這個(gè)就是翻頁。
翻頁是由php直接渲染的，所以里面的鏈接也是php回傳的。在篩選之后ajax回傳數(shù)據(jù)里面，也帶了翻頁的數(shù)據(jù)，就可以直接添到里面。因?yàn)閜ushState和replaceState不能很好的兼容低版本IE，這里我們用了jquery.history插件，在使用pushState或replaceState的時(shí)候觸發(fā) "statechange"事件。
因?yàn)閍jax參數(shù)是作為a標(biāo)簽的鏈接形式寫入翻頁里，所以在翻頁時(shí)需要將參數(shù)提取出來：
$(".pager").on("click", "a", function(e) {
e.preventDefault();
var href = $(this).attr("href");
if (!href) {
return;
};
if ($(this).closest(".pager").hasClass("ajaxPage")) {
changeState(href);
} else {
window.location.href = href;
};
});
先阻止a標(biāo)簽的跳轉(zhuǎn)，然后取出鏈接。這里有一處判斷是否是ajax頁，因?yàn)轫撁娼换ド婕暗狡渌撁嫣D(zhuǎn)過來的情況，所以ajaxPage作為判斷［請忽略。。。
接下來就是使用pushState：
var changeState = function changeState(href) {
var parmas;
var href = href;
//取出參數(shù)（使用插件）
href = href.substring(href.indexOf("?"));
parmas = $.query.parseNew(href).get();
var subParmas = {
/* state對象 */
};
var subHref;
/*
各種判斷處理
subHref為url要與后臺約定
*/
History.pushState(subParmas, $("title").text(), subHref);
};
然后等到pushState的時(shí)候會觸發(fā)"statechange"，我們再根據(jù)參數(shù)ajax取數(shù)據(jù)，最后呈現(xiàn)出來：
//當(dāng)頁面url更新時(shí)更新數(shù)據(jù)
History.Adapter ? History.Adapter.bind(window,"statechange",function(){
var parmas = History.getState().data,
$.when($.get(ajaxlink, parmas)).done(function(result) {
/*
各種呈現(xiàn)處理
*/
});
}) : "";
得益于pushState和replaceState的出現(xiàn)，以及jquery.history插件，這幾行代碼就可以有pjax效果。
嘛～～更多有關(guān)于pjax的應(yīng)用，可以閱讀學(xué)習(xí)淺析Web開發(fā)中前端路由實(shí)現(xiàn)的幾種方式
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/78308.html
摘要：對于那些老網(wǎng)站或者老項(xiàng)目來說全盤改造成并不現(xiàn)實(shí)，于是就有了局部頁面刷新這個(gè)解決方案。如果不知道局部頁面刷新是何物請看這里，這里和這里。但實(shí)際上，第一次后退無法還原的內(nèi)容陷阱，第二次后退頁面刷新了一切恢復(fù)最初的樣子。 ajax在現(xiàn)代網(wǎng)站已經(jīng)得到非常普遍地應(yīng)用，主要的好處大家都知道（異步加載數(shù)據(jù)，不用刷新整個(gè)瀏覽器，更小的數(shù)據(jù)傳輸尺寸）。對于那些老網(wǎng)站或者老項(xiàng)目來說全盤改造成ajax并不現(xiàn)...
摘要：而唯一不引發(fā)刷新的參數(shù)并不會發(fā)送到服務(wù)器，因此服務(wù)器無法獲得狀態(tài)。目前建議設(shè)置為空字符串。此外請注意，及本身調(diào)用時(shí)是不觸發(fā)事件的。我認(rèn)為，按照漸進(jìn)增強(qiáng)的思路，這樣就是最好的了，也就是只使用較少的代碼優(yōu)化高級瀏覽器的使用體驗(yàn)。 HTML5 history API有什么用呢？ 從Ajax翻頁的問題說起 請想象你正在看一個(gè)視頻下面的評論，在翻到十幾頁的時(shí)候，你發(fā)現(xiàn)一個(gè)寫得稍長，但非常有趣的評...
摘要：單頁面應(yīng)用的出現(xiàn)依然存在著爭議性，我們該如何看待他的兩面性呢接下來小生給大家總結(jié)一下他的優(yōu)缺點(diǎn)。單頁面應(yīng)用的優(yōu)勢無刷新體驗(yàn)沒有了令人詬病的頁面頻繁刷新，同時(shí)節(jié)約瀏覽器資源，路由響應(yīng)比較及時(shí)，提升了用戶的體驗(yàn)。 前端猿一天不學(xué)習(xí)就沒飯吃了，后端猿三天不學(xué)習(xí)仍舊有白米飯擺于桌前。IT行業(yè)的快速發(fā)展一直在推動(dòng)著前端技術(shù)棧在不斷地更新?lián)Q代，前端的發(fā)展成了互聯(lián)網(wǎng)時(shí)代的一個(gè)縮影。而單頁面應(yīng)用的發(fā)展...
閱讀 3119·2021-11-18 10:02
閱讀 3412·2021-11-02 14:48
閱讀 3455·2019-08-30 13:52
閱讀 620·2019-08-29 17:10
閱讀 2148·2019-08-29 12:53
閱讀 1473·2019-08-29 12:53
閱讀 1088·2019-08-29 12:25
閱讀 2226·2019-08-29 12:17
