非插件实现评论AJAX翻页

Posted by Harid八月 - 25 - 2011 Leave comments   419 views 

看到DH盆友写了首页的AJAX翻页(去瞧瞧>>),他的博客中也应用了很多的AJAX处理,如评论翻页,我个人觉得评论翻页用AJAX处理还是不错的,于是借鉴其方法在我自己这里把评论的AJAX翻页弄了出来。一般来说,页面中的AJAX处理并不是越多越好,其最大的缺点是:破坏浏览器的前进、后退功能,对搜索引擎支持不友好,不利SEO。

本文涉及代码仅适用于本博客!实现具体:

1、header.php的</head>标签前加载Google JQuery库(使用较经典的1.2.6版本):

1
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>

2、星期九的文章URL是使用的伪静态,我是对欲打开的评论页的URL不断地拆分从而得到欲去的评论页的数字ID(URL结构类似为:http://www.ninthday.net/2011/06/because-of-love.html/comment-page-3#comments,其中comment-page-3中的3就是想要打开的评论页的页码)。根据本博客CSS使用情况而写的JS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
*   Author: Harid
*   Contact: http://www.ninthday.net
*   Date: 2011-8-26
**/
$(document).ready(function comment_page_ajas(){
    $('#commentpager a').click(function(){        
        //获取文章ID
        var i = 0, got = -1, len = document.getElementById('content').getElementsByTagName('div').length;
        while ( i <= len && got == -1){
            var the_id = document.getElementById('content').getElementsByTagName('div')[i].id;
            got = the_id.indexOf('post-'); i++ ;
        }
        var arr_temp_1 = the_id.split("-");
        var post_id = arr_temp_1[1]; //当前文章ID-- post_id
        //文章ID获得
 
        //获取欲取得的评论页页码
        var compageUrl = $(this).attr("href");
        var arr_temp_2 = compageUrl.split("/");
        var str_temp_1 = arr_temp_2.pop();
        var arr_temp_3 = str_temp_1.split("#");
        var str_temp_2 = arr_temp_3[0];
        var arr_temp_4 = str_temp_2.split("-");
        var page_id = arr_temp_4[2];  // page_id即为评论页页码
        //获取评论页页码成功
 
        $.ajax({
        		url: "http://www.ninthday.net/?p="+post_id,
        		type:"POST",
        		data:"action=compageajax&postid="+post_id+"&pageid="+page_id,
        		beforeSend:function() {
            		document.body.style.cursor = 'wait';    
            		$('#commentpager').html('<font color="gray">正在努力为您载入中...</font>');
        		},
        		error:function (xhr, textStatus, thrownError) { 
            		alert("readyState: " + xhr.readyState + " status:" + xhr.status + " statusText:" + xhr.statusText +"     responseText:" +xhr.responseText + " responseXML:" + xhr.responseXML + " onreadystatechange" +xhr.onreadystatechange);         
            		alert(thrownError); 
        		},
        		success: function (data) {
            		$('#ajaxcomment').html(data);    
            		document.body.style.cursor = 'auto';
                $('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
            		comment_page_ajas();
        		}
    		});
    		return false;
		});
})

3、在functions.php里写一个函数来处理请求,格式化处理后的输出结果。函数中主要需要用到wp_list_comments()函数来返回每页的评论,并且保证根据时间倒序输出,然后用paginate_comments_links()返回最新的评论分页代码,需要注意的是貌似必须将所请求的评论页的页码做为参数传入该函数,否则会出现AJAX处理后当前页码一直是“1”的情况。在函数的后面用“add_action()”函数将处理函数添加进hook。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
* Author: Harid
* Contact: http://www.ninthday.net
* Function: Comments page ajax
* Date: 2011-8-26
**/
function AjaxCommentsPage(){
		if( isset($_POST['action'])&& $_POST['action'] == 'compageajax'){
				$postid = $_POST['postid'];
				$pageid = $_POST['pageid'];/*$args数组将请求的评论页页码做为参数传入评论分页函数*/
				$args = array(
											'current' => $pageid,
											'echo' => true
				);
				// Get comments
				$comments = get_comments('post_id='.$postid);
				/*处理为倒序输出*/
				if( 'asc' != get_option('comment_order') ){
						$comments = array_reverse($comments);
				}
				/*下面的输入写入评论页的#ajaxcomment id所在的层*/
				echo "<ol class=\"commentlist\">";
				echo wp_list_comments('callback=custom_comments&type=comment&page=' . $pageid . '&per_page=' . get_option('comments_per_page'), $comments);
				echo "</ol><div id=\"commentnavi\"><span class=\"pages\">评论分页</span><div id=\"commentpager\">";
				$comment_pages = paginate_comments_links($args);
				echo $comment_pages."</div><div class=\"clear\"></div></div>";
				die();
		}
}
add_action('template_redirect', 'AjaxCommentsPage');

   声明:本文采用 BY-NC-SA 协议进行授权 | 星期九
   原创文章转载请注明:转自《非插件实现评论AJAX翻页

分享本文: 腾讯微博 QQ空间 人人网 百度空间 开心网 新浪微博 Google Reader 豆瓣
Comments(33) Leave comments
  1. Gravatar
    阿疯 Google Chrome Google Chrome 18.0.1025.162 Windows Windows XP

    第一段代码里的js代码保存到哪里?

    • Gravatar Harid  @  四月 24th, 2012 at 10:20 replied.

      @阿疯, 只要在加载评论之前加载了这JS代码就行,可以放在一个JS文件里,放在加载评论的语句前面,或者干脆放在<head>里面。这代码需要根据不同的主题结构进行更改的。

  2. Gravatar
    yetone Mozilla Firefox Mozilla Firefox 2012 Unknow Os Unknow Os

    我用的也是willin kan的脚本 :grin:

    • Gravatar Harid  @  十二月 2nd, 2011 at 19:11 replied.

      嗯,挺好用的。

  3. Gravatar
    晓潘博客 Google Chrome Google Chrome 13.0.782.218 Windows Windows XP

    我是用了Willin Kan的方法实现的,然后还把主目录下的wp-comment-post.php改了名 现在spam少多了

    • Gravatar Harid  @  九月 3rd, 2011 at 10:23 replied.

      @晓潘博客, 我怎么就没有想到改wp-comment-post.php的名呢!是不是改了之后将comments.php里的URL改为改后的名字就行了?这样应该至少可以抵制机器注入的评论了吧?

      • Gravatar 晓潘博客  @  九月 4th, 2011 at 13:38 replied.  | #4

        @Harid, 我是用了Willin Kan的comment-ajax 你可以试试

        • Gravatar Harid  @  九月 4th, 2011 at 17:37 replied.

          @晓潘博客, 我也用了的呀,你那里有没有具体的文章?我晚上回来的时候看一看。

          • Gravatar 晓潘博客  @  九月 4th, 2011 at 21:57 replied.  | #5

            @Harid, 这个我就没有了,我就是在Willin Kan 博客上看的,然后照做的

评论分页
6 + 2 =  (required)
 疑问 鼓掌 难过 呲牙 强 微笑 快哭了 坏笑 汗 奋斗 撇嘴 OK 偷笑 委屈 尴尬 傲慢 握手 玫瑰 胜利 大哭 抱拳
启用云输入法:      

NOTICE1: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!

NOTICE2: 请申请gravatar头像(http://en.gravatar.com),木有头像的会显示为“小怪物”头像,将难以通过审核!

NOTICE3: 如果您能消除一下评论框旁边的邻居的寂寞的话,Harid将不胜感激,你懂的!^_^