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