WordPress全站PJAX代碼例子

2024-09-07 00:51:53

字體：大中小

來源：轉載

供稿：網友

ajax + pushState的封裝，讓你可以很方便的使用pushState技術了,今天我給各位使用wordpress的朋友分享一個WordPress全站PJAX代碼的例子.

var ajxmain = '#main' , // 要替換的主體id，改為你文章部分的容器

ajxa = 'a' , // a標簽，自己添加排除規則

ajxcomt = 'comments' , // 整個評論區的id ,不加#

ajxsubmitform = '#commentform' , // 提交按鈕所在的表單

ajxcomtlist = '.comment-list' , // 評論列表id或class

ajxcomtpagenav = '.pagenav' , // 評論分頁導航的id或class

ajxcomtpagenava = '.pagenav a' , // 評論分頁導航的a標簽

ajxsform = '.inlo-search form' , // 搜索表單form標簽

ajxskey = '.s-key' ; // 搜索表單input標簽內的id或class

function reload_func(){

 // 這里放置需要重載的JS或函數

}

$(function() { 

 a(); //pushState初始化執行一次

});

// 建立錨點函數，用于跳轉后的滾動定位，使用這個主要是有側欄評論帶#號時能在請求后定位到該條評論的位置

function bodyam(id) {

 id = isNaN(id) ? $('#' + id).offset().top : id;

 $("body,html").animate({

 scrollTop: id

 }, 0);

 return false;

}

function toam(url) {

 var anchor = location.hash.indexOf('#'); // 用indexOf檢查location.href中是否含有'#'號，如果沒有則返回值為-1

 anchor = window.location.hash.substring(anchor + 1);

 bodyam(anchor);

}

// 主頁地址，用于下面的提交函數

var homeurl = 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(ajxmain).html(), // 抓取主體部分outerHTML用于呈現新的主體。也可以用這句 html: $(ajxmain).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;

 $(ajxmain).html( e.state.html ); //也可以用replaceWith ，最后這個html就是上面替換State后里面的html值 

 // 重載js

 window.load = reloadfunc(); // 重載函數

 }

 }); 

}

//函數：AJAX核心

function ajax(reqUrl, msg, method, data) {

 if (msg == 'pagelink' || msg == 'search') { // 頁面、搜索

 $(ajxmain).fadeTo('slow',0.6);

 } else if ( msg == 'comment' ){ // 評論提交 

 $('#' + ajxcomt).fadeTo('slow',0.5);

 } else if ( msg == 'comtpagenav' ){ // 評論分頁時

 $(ajxcomtlist).fadeTo('slow',0.5);

 $(ajxcomtpagenav).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】

 $(ajxmain).html($(data).find(ajxmain).html()) ; // 替換原#main的內容

 $(ajxmain).fadeTo('normal',1);

 } else if (msg == 'comment') { // 又如果msg為評論回復——————————【2】

 $('#' + ajxcomt).html($(data).find('#' + ajxcomt).html());// 評論列表滑出

 $('#' + ajxcomt).fadeTo('normal',1);

 $("body,html").animate({scrollTop:$('#'+ajxcomt).offset().top}, 900); // 定位返回評論ID頂部

 } else if (msg == 'comtpagenav') { // 又如果msg為評論分頁——【3】

 var content = $(data).find(ajxmain).html();

 var pagedstring = $(data).find(ajxcomtpagenav).html();

 $(ajxmain).html(content);

 $(ajxcomtpagenav).html(pagedstring);

 $(ajxcomtlist).fadeTo('normal',1); // 評論列表顯示

 $(ajxcomtpagenav).fadeTo('normal',1); // 評論分頁顯示

 $("body,html").animate({scrollTop:$(ajxcomtlist).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(ajxmain).html(),

 };

 // 將當前url和歷史url添加到瀏覽器當中，用于后退。里面三個值分別是: state, title, url

 window.history.pushState(state, $(data).filter("title").text(), reqUrl);

 }

 },

 complete: function() { // ajax完成后加載

 // 代碼重載區

 if (msg == 'pagelink') { // 若msg為頁面鏈接

 toam(reqUrl) ;// 定位到相應鏈接位置,這個必須放在window.history...之后執行，否則遇到帶#號的鏈接，再點擊其他鏈接地址欄就無法改變

 }

 window.load = reloadfunc(); // 重載函數

 },

 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()); // 彈出警告,這個是必需的，如果刪除那么提交錯誤時就會打開空白頁面

 $('#' + ajxcomt).fadeTo('normal',1);

 } else if ( msg == 'comtpagenav' ) {

 $(ajxcomtlist).fadeTo('normal',1); // 警告后評論區顯示

 $(ajxcomtpagenav).fadeTo('normal',1); // 警告后評論區顯示

 } else {

 location.href = reqUrl; //頁面錯誤時跳轉到請求的頁面

 }

 },

 });

}

//頁面ajax

$('body').on("click",ajxa,

function() {

 ajax($(this).attr("href"), 'pagelink');

 return false;

});

//評論ajax

$('body').on('submit',ajxsubmitform,

function() {

 ajax(replaceUrl(this.action, homeurl), 'comment', 'POST', getFormJson(this));

 return false;

});

//搜索ajax

$('body').on('submit',ajxsform,

function() {

 ajax(this.action + '?s=' + $(this).find(ajxskey).val(), 'search');

 return false;

});

//評論分頁ajax--Vevb.com

$('body').on("click",ajxcomtpagenava,

function() {

 ajax($(this).attr("href"), 'comtpagenav');

 return false;

});