ajax + pushState的封装，让你可以很方便的使用pushState技术了,今天我给各位使用wordpress的朋友分享一个WordPress全站PJAX代码的例子.

1. var ajx<em>main = '#main' , // 要替换的主体id，改为你文章部分的容器 
2. ajx</em>a = 'a' , // a标签，自己添加排除规则 
3. ajx<em>comt = 'comments' , // 整个评论区的id ,不加# 
4. ajx</em>submit<em>form = '#comment</em>form' , // 提交按钮所在的表单 
5. ajx<em>comtlist = '.comment-list' , // 评论列表id或class 
6. ajx</em>comtpagenav = '.pagenav' , // 评论分页导航的id或class 
7. ajx<em>comtpagenav</em>a = '.pagenav a' , // 评论分页导航的a标签 
8. ajx<em>sform = '.inlo-search form' , // 搜索表单form标签 
9. ajx</em>skey = '.s-key' ; // 搜索表单input标签内的id或class 
10. function reload_func(){ 
11.     // 这里放置需要重载的JS或函数 
12. }<p></p> 
13. <p>$(function() {<br> 
14.     a(); //pushState初始化执行一次 
15. }); 
16. // 建立锚点函数，用于跳转后的滚动定位，使用这个主要是有侧栏评论带#号时能在请求后定位到该条评论的位置 
17. function body<em>am(id) {  
18.     id = isNaN(id) ? $('#' + id).offset().top : id; 
19.     $("body,html").animate({ 
20.         scrollTop: id 
21.     }, 0); 
22.     return false; 
23. } 
24. function to</em>am(url) {  
25.     var anchor = location.hash.indexOf('#'); // 用indexOf检查location.href中是否含有'#'号，如果没有则返回值为-1 
26.     anchor = window.location.hash.substring(anchor + 1); 
27.     body<em>am(anchor); 
28. } 
29. // 主页地址，用于下面的提交函数 
30. var home</em>url = document.location.href.match(/http://([^/]+)//i)[0];  
31. // 函数： 替换url，用于评论ajax提交 
32. function replaceUrl(url, domain) { 
33.     return url.replace(/http://([^/]+)//i, domain); 
34. } 
35. // 函数：从封装的Json获取 
36. function getFormJson(frm) { 
37.     var o = {}; 
38.     var a = $(frm).serializeArray(); 
39.     $.each(a, 
40.         function() { 
41.         if (o[this.name] !== undefined) { 
42.             if (!o[this.name].push) { 
43.                 o[this.name] = [o[this.name]]; 
44.             } 
45.             o[this.name].push(this.value || ''); 
46.         } else { 
47.             o[this.name] = this.value || ''; 
48.         } 
49.         }); 
50.     return o; 
51. } 
52. // 函数：更新浏览器历史缓存（用于浏览器后退） 
53. function l(){ 
54.     history.replaceState( // 刷新历史点保存的数据，给state填入正确的内容 
55.     {    url: window.document.location.href, 
56.         title: window.document.title, 
57.         html: $(document).find(ajx<em>main).html(), // 抓取主体部分outerHTML用于呈现新的主体。也可以用这句 html: $(ajx</em>main).prop('outerHTML'), 
58.     }, window.document.title, document.location.href); 
59. } 
60. // 函数：页面载入初始一次，解决Chrome浏览器初始载入时产生ajax效果的问题,并且监听前进后退事件 
61. function a(){ 
62.     window.addEventListener( 'popstate', function( e ){  //监听浏览器后退事件 
63.         if( e.state ){ 
64.             document.title = e.state.title; 
65.             $(ajx<em>main).html( e.state.html ); //也可以用replaceWith ，最后这个html就是上面替换State后里面的html值<br> 
66.             // 重载js 
67.             window.load =  reload</em>func(); // 重载函数 
68.         } 
69.     });<br> 
70. } 
71. //函数：AJAX核心 
72. function ajax(reqUrl, msg, method, data) { 
73.     if (msg == 'pagelink' || msg == 'search') { // 页面、搜索 
74.         $(ajx<em>main).fadeTo('slow',0.6);  
75.     } else if ( msg == 'comment' ){ // 评论提交<br> 
76.         $('#' + ajx</em>comt).fadeTo('slow',0.5);  
77.     } else if ( msg == 'comtpagenav' ){ //  评论分页时 
78.         $(ajx<em>comtlist).fadeTo('slow',0.5); 
79.         $(ajx</em>comtpagenav).fadeTo('slow',0.8); 
80.     } 
81.     $.ajax({ 
82.         url: reqUrl,  
83.         type: method, 
84.         data: data, 
85.         beforeSend : function () { //加载前操作 这个必须放在window.history.pushState()之前，否则会出现逻辑错误。<br> 
86.             l(); //刷新历史点内容，这个必须放在window.history.pushState()之前，否则会出现逻辑错误。 
87.         }, 
88.         success: function(data) { 
89.             if (msg == 'pagelink' || msg == 'search') { // 又如果msg为 页面 或 搜索—— 【1】 
90.                 $(ajx<em>main).html($(data).find(ajx</em>main).html()) ; // 替换原#main的内容 
91.                 $(ajx<em>main).fadeTo('normal',1); 
92.             } else if (msg == 'comment') { // 又如果msg为 评论回复——————————【2】  
93.                 $('#' + ajx</em>comt).html($(data).find('#' + ajx<em>comt).html());//  评论列表滑出 
94.                 $('#' + ajx</em>comt).fadeTo('normal',1);  
95.                 $("body,html").animate({scrollTop:$('#'+ajx<em>comt).offset().top}, 900); // 定位返回评论ID顶部 
96.             } else if (msg == 'comtpagenav') { // 又如果msg为 评论分页——【3】 
97.                 var content = $(data).find(ajx</em>main).html(); 
98.                 var pagedstring = $(data).find(ajx<em>comtpagenav).html(); 
99.                 $(ajx</em>main).html(content); 
100.                 $(ajx<em>comtpagenav).html(pagedstring); 
101.                 $(ajx</em>comtlist).fadeTo('normal',1); // 评论列表显示 
102.                 $(ajx<em>comtpagenav).fadeTo('normal',1); // 评论分页显示 
103.                 $("body,html").animate({scrollTop:$(ajx</em>comtlist).offset().top}, 600);  
104.             } 
105.             document.title = $(data).filter("title").text(); // 浏览器标题变更 
106.             if (msg != 'comment') { // —— 不为后退 也 不为评论回复时 
107.                 var state = { // 设置state参数 
108.                     url: reqUrl, 
109.                     title: $(data).filter("title").text(), 
110.                     html: $(data).find(ajx<em>main).html(), 
111.                 }; 
112.                 // 将当前url和历史url添加到浏览器当中，用于后退。里面三个值分别是: state, title, url 
113.                 window.history.pushState(state, $(data).filter("title").text(), reqUrl); 
114.             } 
115.         }, 
116.         complete: function() { // ajax完成后加载 
117.             // 代码重载区 
118.             if (msg == 'pagelink') { // 若msg为 页面链接 
119.                 to</em>am(reqUrl) ;// 定位到相应链接位置,这个必须放在window.history...之后执行，否则遇到带#号的链接，再点击其他链接地址栏就无法改变 
120.             }  
121.             window.load =  reload<em>func(); // 重载函数 
122.         }, 
123.         timeout: 5000, // 超时长度<br> 
124.         error: function(request) { // 错误时的处理 
125.             if (msg == msg == 'pagelink' || msg == 'search'){ 
126.                 location.href = reqUrl;    //直接刷新跳转到请求的页面链接 
127.             } else if (msg == 'comment') { // 若msg为评论回复 
128.                 alert($(request.responseText).filter("p").text()); // 弹出警告,这个是必需的，如果删除那么提交错误时就会打开空白页面 
129.                 $('#' + ajx</em>comt).fadeTo('normal',1);  
130.             } else if ( msg == 'comtpagenav' ) { 
131.                 $(ajx<em>comtlist).fadeTo('normal',1); // 警告后评论区显示 
132.                 $(ajx</em>comtpagenav).fadeTo('normal',1); // 警告后评论区显示 
133.             } else { 
134.                 location.href = reqUrl; //页面错误时跳转到请求的页面 
135.             } 
136.         }, 
137.     }); 
138. } 
139. //页面ajax 
140. $('body').on("click",ajx<em>a, 
141. function() { 
142.     ajax($(this).attr("href"), 'pagelink'); 
143.     return false; 
144. }); 
145. //评论ajax 
146. $('body').on('submit',ajx</em>submit<em>form,  
147. function() { 
148.     ajax(replaceUrl(this.action, home</em>url), 'comment', 'POST', getFormJson(this)); 
149.     return false; 
150. }); 
151. //搜索ajax 
152. $('body').on('submit',ajx<em>sform,  
153. function() { 
154.     ajax(this.action + '?s=' + $(this).find(ajx</em>skey).val(), 'search');  
155.     return false; 
156. }); 
157. //评论分页ajax--phpfensi.com
158. $('body').on("click",ajx<em>comtpagenav</em>a, 
159. function() { 
160.     ajax($(this).attr("href"), 'comtpagenav'); 
161.     return false; 
162. });</p>

Tags: WordPress全站 PJAX

分享到：