类别导航:
通知:目前网站正常哦!
你的位置:首页 >> 编程技术 >> wordpress ajax之三:评论ajax分页

wordpress ajax之三:评论ajax分页

发表日期:2011-08-29 作者:DH分类:编程技术 标签: wordpress ajax
索引[隐藏]

1 序言

上一遍讲到利用一个简单的例子说明了如何使用简单的ajax。这里说明一个应用:评论页的ajax分页应用。关于这方面的文章: (1)WordPress评论非插件实现ajax翻页,我在测试的时候,发现里面虽然有一些地方有一点问题,但是这些可以参考一下哦。 (2)非插件实现评论AJAX翻页,这个是Harid的方法。 各种方法基于的原理基本上一样,大家可以多多参考,希望能给自己折腾主题,又需要实现ajax效果的童鞋有一些帮助。 如果要评论ajax分页,必须首先评论分页,代码中包含了评论分页的内容,大家参考即可。

2 需要的元素

和上篇讲到的一样,元素包括: 1. 一个客户端页面,这里包含了有css标记的元素,比如a,可以供js来寻找,在用户点击的时候发出ajax请求 2. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js 3. 定义的js文件,规定请求的动作,和接受数据之后的动作 4. 后台模板中的functions.php定义一个函数,用了规定接受到ajax请求之后后台要做的动作。 元素的位置: 1. 对于wordpress,评论页面的就是comments.php 2. jquery.js在header.php中包含

3.把自己定义的js保存为index_ajax_navi.js,同样在header.php中包含

4.functions.php中添加行数即可

3 例子的运行情况

具体可以参考我的博客的评论的分页ajax情况。

4 comments.php部分

把comments.php写成两个文件,把comments.php中列出评论的部分分出成一个文件,实际上就是wp_list_comments函数和分页的函数。分出来为comment_list.php。是ajax请求需要重新加载的页面。 index里面需要用到wp_list_comments和分页的地方写成:
...
...
comment_list.php写成这个样子:
 $post->ID, 'status' => 'approve', 'order' => 'ASC'));
if ( $comments )
{ 
?>
   
";
           echo $comment_pages;
		   echo "
"; } } } ?>

5 js部分

下面的代码保存为comment_ajax_navi.js文件,放到模板里面,记得在header.php中包含哦
var navi='.page_navi';
var navi_a='.page_navi a';
var content='#comment_list';

$(document).ready(function comment_ajax_navi (){
	$(navi_a).click(function() {
		var z = $(this).attr("href");
		$.ajax({
			url: z,
			type:"POST",
			data:"action=comment_ajax_navi",
			beforeSend:function()
			{
				document.body.style.cursor = 'wait';
				var C=0.7;
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});				
				$(navi).html('载入中...');
			},
			//error: function(request) 
			//{
			//	alert(request.responseText);
			//},
			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)
			{
				//alert(data);
				$(content).html(data);				
				document.body.style.cursor = 'auto';
				var C=1; 
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
				comment_ajax_navi();//翻页后DOM变化了,需要重新绑定函数
				jQuery('html, body').animate({scrollTop:$(content).offset().top - 100}, 'slow');
			}
		});
		return false;
		});
})

6 后台php部分

下面的代码放到functiongs.php中,

7 寄语

希望大家通过上面的例子能够成功实现评论的ajax翻页效果。有几个注意点: (1)每个人的主题设置不同,需要根据自己的主题设置自己的参数。特别是包含分页链接的div的class。我这里是.page_navi。还有就是包含index_list.php的 div id="comment_list",需要在js中填入这两个关键的div。 (2)喜欢折腾的主题中wp_list_comments一般都有callback函数,来重新写评论列表的部分,这时需要在comment_list.php中的wp_list_comments参数有所调整哦。 本文提供一个思想,要想学好这个,还需要自己摸索一下下。

除非注明,文章均为灯火部落原创,转载请注明出处:wordpress ajax之三:评论ajax分页-灯火部落
相关文章:
  • wordpress ajax之四:archive页面ajax分页
  • wordpress ajax之二:首页ajax分页
  • wordpress ajax之五:最近评论ajax分页
  • wordpress主题:增加帅哥认证标识(续)
  • wordpress ajax之六:评论表情动态加载
  • wordpress ajax之一:一个简单的例子
  • ∧回到顶部∧