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

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>管理员&nbsp;&nbsp;{$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>管理员&nbsp;&nbsp;"+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);
   }

原文链接：https://blog.csdn.net/living_ren/article/details/79007427

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。