文章详情页面回复功能添加及实现原理

1.评论区域模板内容如下，内嵌回复按钮和隐藏回复框

<!-- 评论列表 -->
<foreach name="commList" item="value">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="__PUBLIC__/static/Home/images/touxiang.jpg" alt="媒体对象" width="80">
</a>
<div class="media-body">
<h4 class="media-heading">
<span class="pull-left">{$value.comm_title}</span>
<time class="pull-right">{$value.comm_time|date="Y/m/d H:i:s",###}</time>
</h4>
<p>{$value.comm_content}<a href="javascript:void(0);" class="reply">回复</a></p>
<br>
<div style="display:none">
<textarea cols="50" rows="2"></textarea>
<input type="button" class="replyBtn" data-id="{$value.comm_id}" value="提交">
</div>
<foreach name="value['reply']" item="val">
<p>管理员  {$val.reply_time|date="Y/m/d H:i:s",###}:{$val.reply_content}</p>
</foreach>

2.回复框点击实现原理及回复内容ajax传递给后台

//回复框点击显示
$('.reply').click(function(){
//toggle方法展示回复框
$(this).parent().next().next().toggle('slow');
})

//回复提交事件ajax处理
$('.replyBtn').click(function(){
//取得回复内容和评论ID的值
var _this=$(this);
var reply_content=_this.prev().val();
var comm_id=_this.attr('data-id');
var url="{:U('Content/reply')}";
$.get(url,{'comm_id':comm_id,'reply_content':reply_content},function(data){
//将接受到到的静态模板放到评论区块下面
if(data.status){
//入库成功,则将回复内容放到提交按钮的后面
var html="<p>管理员  "+data.time+':'+reply_content+"</p>";
_this.after(html);
}else{
alert(data.msg);
}
},'json')
})

3.后台接收ajax参数并入库，如果入库成功则响应成功标记，前端通过判断标记来决定是否在模板中添加回复内容

/*提交添加回复内容的方法
return string
*/
function reply(){
$data=I('get.');
$data['reply_time']=time();
//数据入库
$res=M('reply')->add($data);
$result=array('status'=>0,'msg'=>'','time'=>date("Y/m/d H:i:s",$data['reply_time']));
if($res){
//如果回复成功,响应1
$result['status']=1;

}else{
$result['msg']='回复失败！';
}
$this->ajaxReturn($result);
}