ajax 显示评论并制作翻页

修改后台评论模型

创建search方法

//取出一件商品的评论
public function search($goodsId,$pageSize=5)
{
//要做ajax翻页所以要自己写

$where['a.goods_id']=array('eq',$goodsId);
//取出总的记录数
$count=$this->where($where)->count();

//计算总的页数
$pageCount=ceil($count / $pageSize);

//获取当前页
$currentpage=max(1,(int)I('get.p',1); // >=1的整数
//计算limit上的第一个参数：偏移量
$offset=($currentpage-1)* $pageSize;

//取数据
$data = $this->alias('a')
->field('a.content,a.addtime,a.start,a.click_count,b.face,b.usernameCOUNT(c.id) reply_count')
->join('LEFT JOIN __MEMBER__ b ON a.member_id=b.id
LEFT JOIN __COMMENT_REPLY__ c ON a.id=c.comment_id')
->where($where)
->order('a.id DESC')
->limit("$offset,$pageSize")
->group('a.id')
->select();

return array(
'data'=>$data, //返回评论数据和总页数【翻页的字符串由JS拼为了做AJAX的翻页】
'pageCount'=>$pageCount,

);
}

4.2控制器中添加一个方法

//ajax获取评论
public function ajaxGetPl()
{
$goodsId=I('get.goods_id');
$model=D('Admin/Comment');
$data=$model->search($goodsId,5);
echo json_encode($data);
}

4.3 在页面中写JS请求这个方法获取数据

/************ajax发表评论*************/
$(".comment_btn").click(function(){
//先接收表单中的数据格式： nametom&age=23
var form = $("#comment-form");
var formData=form.serialize();

$.ajax({
type:"POST",
url:"<?php echo U('Comment/add'); ?>",
data:formData, //表单中要提交的数据
dataType:"json", //服务器返回的数据格式
success:function(data)
{
if(data.status == 0)
alert(data.info);

else
{
//清空表单
form.trigger("reset"); //触发表单的reset事件

//用新发表的评论数据拼出一个显示的HTML字符串
var html=' <div class="comment_items mt10 none"><div class="user_pic"><dl><dt><a href=""><img src="'+data.info.face+'" alt="" /></a></dt><dd><a href="">'+data.info.face+'</a></dd></dl></div><div class="item"><div class="title"><span>'+data.info.addtime+'</span><strong class="star star'+data.info.star+'"></strong></div><div class="comment_content">'+data.info.content+'</div><div class="btns"><a href="" class="reply">回复(0)</a><a href="" class="useful">有用(0)</a></div><div class="cornor"></div></div>';
//把整个评论的字符串转化成jq的对象
html = $(html);
// 把拼好的评论放到页面中
$("#comment_container").prepend(html);
// 让导航条直接滚动第一个评论处
$("body").animate({
"scrollTop" : "750px"
}, 1000, function(){
html.fadeIn(2000);
});
}
}

});

/**************评论的缓存**************/

var cache=[]; //每页的缓存缓存到客户端浏览器的内存中

//获取某一页缓存
function getCache(page)
{
for(var i=0;i<cache.length;i++)
{
if(cache[i][0] == page)
return cache[i];
}

return false;
}

/***********ajax获取某一页的评论************/
function ajaxGetPl(page)
{
var c=getCache(page);
if(c !==false)
{
$("#comment_container").html(c[1]);
$('.page').html(c[2]);
return;
}
$.ajax({
type:"GET",
url:"<?php echo U('Comment/ajaxGetPl?goods_id='.$info['id'],'',FALSE); ?>/P/"+page,
dataType:"json",
success:function(data)
{
//循环每个评论拼出HTML字符串放到页面中
var html="";
$(data.data).each(function(k,v){
html+=' <div class="comment_items mt10 "><div class="user_pic"><dl><dt><a href=""><img src="'+v.face+'" alt="" /></a></dt><dd><a href="">'+v.face+'</a></dd></dl></div><div class="item"><div class="title"><span>'+v.addtime+'</span><strong class="star star'+v.star+'"></strong></div><div class="comment_content">'+v.content+'</div><div class="btns"><a href="" class="reply">回复('+v.reply_count+')</a><a href="" class="useful">有用('+v.click_count+')</a></div><div class="cornor"></div></div>';
});
//放到页面中，覆盖原数据

$("#comment_container").html(html);

//根据总的页数，拼出翻页字符串
var pageString="";
for(var i=0;i<=data.pageCount;i++)
{
if(page == i)
var cls='class="cur"';
else
var cls='';
pageString+='<a '+cls+'onclick="ajaxGetPl('+i+');" href="javascript:void(0);">'+i+'</a>';
}

//放到页面
$('.page').html(pageString);

//放到缓存中
cache.push([page,html,pageString]);
}
});
}
//取第一页的评论
ajaxGetPl(1);

ajax 显示评论并制作翻页

相关推荐