文章詳情頁面評論功能新增及實現原理
阿新 • • 發佈:2019-02-14
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>