1. 程式人生 > >文章詳情頁面評論功能新增及實現原理

文章詳情頁面評論功能新增及實現原理

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>