WordPress全站PJAX代码示例

发布时间：2022-06-24 10:17 所属栏目：61 来源：互联网

导读：ajax + pushState的封装，让你可以很方便的使用pushState技术了,今天我给各位使用wordpress的朋友分享一个WordPress全站PJAX代码的例子. var ajxemmain = #main , // 要替换的主体id，改为你文章部分的容器 ajx/ema = a , // a标签，自己添加排除规则 ajxemc

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--phpfensi.com
　　$('body').on("click",ajxcomtpagenava,
　　function() {
　　 ajax($(this).attr("href"), 'comtpagenav');
　　 return false;
　　});。

（编辑：ASP站长网）