INLOJV封裝的自用WordPress全站PJAX代碼。包括最簡單的評論ajax，更快速的前進后退功能
羊年起不再折騰WordPress了，可以看到本站近期文章不存在什么wordpress關鍵字，也因為老有人跑來加Q問我這個東西怎么搞，所以本人就封裝了這個，不僅僅是頁面pjax。其實網上教程有很多了，但不是全站的，搜索、評論等還要另外寫，下面這個就不必了，包括最簡單的評論ajax，更快速的前進后退功能。本篇是wp相關的最后一篇文章。
首先請看本站PJAX教程
注：代碼極不規范（我本來就不是專業的），喜歡就拿去吧，不過若要轉載就請保留本站一個鏈接。
特別建議：有一定js基礎的朋友使用，能自己優化就自己優化，沒接觸過的還是別折騰了，不會則自行百度，下面的注釋都是我當初一句句百度折騰學習jq才加上去的。
//————————————————————————————————————
// Packaged PJAX By INLOJV 2015.01.09
// 頁面、搜索、評論、評論分頁 PJAX
//————————————————————————————————————
// ——————————————————————— AJAX-評論、搜索、分頁 等
var ajx_main = '#main' , // 要替換的主體id，改為你文章部分的容器
ajx_a = 'a' , // a標簽，自己添加排除規則
ajx_comt = 'comments' , // 整個評論區的id ,不加#
ajx_submit_form = '#comment_form' , // 提交按鈕所在的表單
ajx_comtlist = '.comment-list' , // 評論列表id或class
ajx_comtpagenav = '.pagenav' , // 評論分頁導航的id或class
ajx_comtpagenav_a = '.pagenav a' , // 評論分頁導航的a標簽
ajx_sform = '.inlo-search form' , // 搜索表單form標簽
ajx_skey = '.s-key' ; // 搜索表單input標簽內的id或class
function reload_func(){
// 這里放置需要重載的JS或函數
}
$(function() {
a(); //pushState初始化執行一次
});
// 建立錨點函數，用于跳轉后的滾動定位，使用這個主要是有側欄評論帶#號時能在請求后定位到該條評論的位置
function body_am(id) {
id = isNaN(id) ? $('#' + id).offset().top : id;
$("body,html").animate({
scrollTop: id
}, 0);
return false;
}
function to_am(url) {
var anchor = location.hash.indexOf('#'); // 用indexOf檢查location.href中是否含有'#'號，如果沒有則返回值為-1
anchor = window.location.hash.substring(anchor + 1);
body_am(anchor);
}
// 主頁地址，用于下面的提交函數
var home_url = document.location.href.match(/http:\/\/([^\/]+)\//i)[0];
// 函數： 替換url，用于評論ajax提交
function replaceUrl(url, domain) {
return url.replace(/http:\/\/([^\/]+)\//i, domain);
}
// 函數：從封裝的Json獲取
function getFormJson(frm) {
var o = {};
var a = $(frm).serializeArray();
$.each(a,
function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
// 函數：更新瀏覽器歷史緩存（用于瀏覽器后退）
function l(){
history.replaceState( // 刷新歷史點保存的數據，給state填入正確的內容
{ url: window.document.location.href,
title: window.document.title,
html: $(document).find(ajx_main).html(), // 抓取主體部分outerHTML用于呈現新的主體。也可以用這句 html: $(ajx_main).prop('outerHTML'),
}, window.document.title, document.location.href);
}
// 函數：頁面載入初始一次，解決Chrome瀏覽器初始載入時產生ajax效果的問題,并且監聽前進后退事件
function a(){
window.addEventListener( 'popstate', function( e ){ //監聽瀏覽器后退事件
if( e.state ){
document.title = e.state.title;
$(ajx_main).html( e.state.html ); //也可以用replaceWith ，最后這個html就是上面替換State后里面的html值
// 重載js
window.load = reload_func(); // 重載函數
}
});
}
//函數：AJAX核心
function ajax(reqUrl, msg, method, data) {
if (msg == 'pagelink' || msg == 'search') { // 頁面、搜索
$(ajx_main).fadeTo('slow',0.6);
} else if ( msg == 'comment' ){ // 評論提交
$('#' + ajx_comt).fadeTo('slow',0.5);
} else if ( msg == 'comtpagenav' ){ // 評論分頁時
$(ajx_comtlist).fadeTo('slow',0.5);
$(ajx_comtpagenav).fadeTo('slow',0.8);
}
$.ajax({
url: reqUrl,
type: method,
data: data,
beforeSend : function () { //加載前操作 這個必須放在window.history.pushState()之前，否則會出現邏輯錯誤。
l(); //刷新歷史點內容，這個必須放在window.history.pushState()之前，否則會出現邏輯錯誤。
},
success: function(data) {
if (msg == 'pagelink' || msg == 'search') { // 又如果msg為 頁面 或 搜索—— 【1】
$(ajx_main).html($(data).find(ajx_main).html()) ; // 替換原#main的內容
$(ajx_main).fadeTo('normal',1);
} else if (msg == 'comment') { // 又如果msg為 評論回復——————————【2】
$('#' + ajx_comt).html($(data).find('#' + ajx_comt).html());// 評論列表滑出
$('#' + ajx_comt).fadeTo('normal',1);
$("body,html").animate({scrollTop:$('#'+ajx_comt).offset().top}, 900); // 定位返回評論ID頂部
} else if (msg == 'comtpagenav') { // 又如果msg為 評論分頁——【3】
var content = $(data).find(ajx_main).html();
var pagedstring = $(data).find(ajx_comtpagenav).html();
$(ajx_main).html(content);
$(ajx_comtpagenav).html(pagedstring);
$(ajx_comtlist).fadeTo('normal',1); // 評論列表顯示
$(ajx_comtpagenav).fadeTo('normal',1); // 評論分頁顯示
$("body,html").animate({scrollTop:$(ajx_comtlist).offset().top}, 600);
}
document.title = $(data).filter("title").text(); // 瀏覽器標題變更
if (msg != 'comment') { // —— 不為后退 也 不為評論回復時
var state = { // 設置state參數
url: reqUrl,
title: $(data).filter("title").text(),
html: $(data).find(ajx_main).html(),
};
// 將當前url和歷史url添加到瀏覽器當中，用于后退。里面三個值分別是: state, title, url
window.history.pushState(state, $(data).filter("title").text(), reqUrl);
}
},
complete: function() { // ajax完成后加載
// 代碼重載區
if (msg == 'pagelink') { // 若msg為 頁面鏈接
to_am(reqUrl) ;// 定位到相應鏈接位置,這個必須放在window.history...之后執行，否則遇到帶#號的鏈接，再點擊其他鏈接地址欄就無法改變
}
window.load = reload_func(); // 重載函數
},
timeout: 5000, // 超時長度
error: function(request) { // 錯誤時的處理
if (msg == msg == 'pagelink' || msg == 'search'){
location.href = reqUrl; //直接刷新跳轉到請求的頁面鏈接
} else if (msg == 'comment') { // 若msg為評論回復
alert($(request.responseText).filter("p").text()); // 彈出警告,這個是必需的，如果刪除那么提交錯誤時就會打開空白頁面
$('#' + ajx_comt).fadeTo('normal',1);
} else if ( msg == 'comtpagenav' ) {
$(ajx_comtlist).fadeTo('normal',1); // 警告后評論區顯示
$(ajx_comtpagenav).fadeTo('normal',1); // 警告后評論區顯示
} else {
location.href = reqUrl; //頁面錯誤時跳轉到請求的頁面
}
},
});
}
//頁面ajax
$('body').on("click",ajx_a,
function() {
ajax($(this).attr("href"), 'pagelink');
return false;
});
//評論ajax
$('body').on('submit',ajx_submit_form,
function() {
ajax(replaceUrl(this.action, home_url), 'comment', 'POST', getFormJson(this));
return false;
});
//搜索ajax
$('body').on('submit',ajx_sform,
function() {
ajax(this.action + '?s=' + $(this).find(ajx_skey).val(), 'search');
return false;
});
//評論分頁ajax
$('body').on("click",ajx_comtpagenav_a,
function() {
ajax($(this).attr("href"), 'comtpagenav');
return false;
});
