文章詳細ページコメント機能の追加と実現原理
1.コメントボックス及びコメント内容の展示テンプレートは以下の通りである:
2.コメントボタンをクリックするとイベントがトリガーされajaxを介してバックグラウンドに渡される
3.バックグラウンドでajaxから渡されたパラメータを受信して入庫処理を行い、入庫に成功した場合、コメントの下にコメントテンプレートに応答する
4.カスタムコメントのテンプレートの内容は次のとおりです.
<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から渡されたパラメータを受信して入庫処理を行い、入庫に成功した場合、コメントの下にコメントテンプレートに応答する
/*
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.カスタムコメントのテンプレートの内容は次のとおりです.
<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>