看到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翻页》
第一段代码里的js代码保存到哪里?
@阿疯, 只要在加载评论之前加载了这JS代码就行,可以放在一个JS文件里,放在加载评论的语句前面,或者干脆放在<head>里面。这代码需要根据不同的主题结构进行更改的。
我用的也是willin kan的脚本
嗯,挺好用的。
我是用了Willin Kan的方法实现的,然后还把主目录下的wp-comment-post.php改了名 现在spam少多了
@晓潘博客, 我怎么就没有想到改wp-comment-post.php的名呢!是不是改了之后将comments.php里的URL改为改后的名字就行了?这样应该至少可以抵制机器注入的评论了吧?
@Harid, 我是用了Willin Kan的comment-ajax 你可以试试
@晓潘博客, 我也用了的呀,你那里有没有具体的文章?我晚上回来的时候看一看。
@Harid, 这个我就没有了,我就是在Willin Kan 博客上看的,然后照做的
Random Posts
Recent Posts
Recent Comments
By Plastic injection mould
By OOZJ
By Jusbe
By 互联网战
By 互联网战
By ixwebhosting
Blogroll
Categories
Tag Cloud
360 5800 Alexa C++ Chrome Cisco Dedecms Discuz Fcitx Fedora GFW Gravatar IE Linux Mobile ModelSim Music QT Quartus Shell Verilog VPN VPS Windows Wordpress XAMPP Xilinx xp 下载 垃圾评论 情感 手机 插件 星期九 注册 电子信息 程序设计 站长工具 缩略图 网络应用 考研 胡思乱想 西工大 视频 软件Meta