文章详情页面评论功能添加及实现原理

1.评论框及评论内容展示模板如下：

      <!-- 发表评论 -->
      <div id="comment">
      <h3><strong>发表评论:</strong></h3>
   <p><span>标题：</span>
     <input type="text" name="" id="comm_title" class="text"></p>
   <p><span>内容：</span><textarea rows="10" id="content" cols="30" class="text-textarea"></textarea></p>
     <p style="text-align:right;"><button class="btn">发表</button></p>
      </div>     

2.评论按钮点击时触发事件，通过ajax传递给后台

        //评论事件ajax处理
        $('.btn').click(function(){ 
          //取得title和content的值
          var title=$('#comm_title').val();
          var content=$('#content').val();
          var url="{:U('Content/comment')}";
          if(title==''||content==''){
            alert("评论或标题为空！无法提交！");
            return false;
          }
          var art_id="{$artInfo.art_id}";
          $.get(url,{
  'art_id':art_id,'comm_title':title,'comm_content':content},function(data){ 
              //将接受到到的静态模板放到评论区块下面
              $('#comment').after(data);

              //将评论区域内容清空
              $('#comm_title').val('');
              $('#content').val('');
              //刷新
              location.reload();
          })
        })

3.后台接收ajax传递的参数进行入库处理，如果入库成功则响应一块comment模板到评论下方

    /*提交添加评论信息的方法 return string */
      function comment(){ 
        $data=I('get.');
        //添加入库时间
        $data['comm_time']=time();
        //数据入库
        $res=M('comm')->add($data);

        if($res){
            //如果添加成功则响应一块静态模板给前端
            $this->assign('data',$data);
            $this->display();
        }else{
            echo '评论发布失败！';
        }
   }

4.自定义comment的模板内容如下：

  <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">{$data.comm_title}</span>
      <time class="pull-right">{$data.comm_time|date="Y/m/d H:i:s",###}</time>
      </h4>
      <p>{$data.comm_content}<a href="javascript:void(0);" class="reply">回复</a></p>
      <br>
      <div style="display:none;">              
        <textarea name="" cols="50" rows="2"</textarea>
        <input type="button" class="replyBtn" data-id="{$data.comm_id}" value="提交">
      </div>
   </div>  
 </div>

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

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