thinkPHP實(shí)現(xiàn)基于ajax的評(píng)論回復(fù)功能

第thinkPHP實(shí)現(xiàn)基于ajax的評(píng)論回復(fù)功能本文實(shí)例講述了thinkPHP實(shí)現(xiàn)基于ajax的評(píng)論回復(fù)功能。分享給大家供大家參考，具體如下：

控制器代碼:

namespaceHome\Controller;

useThink\Controller;

classIndexControllerextendsController{

publicfunctionindex(){

$num=M('comment')-count();//獲取評(píng)論總數(shù)

$this-assign('num',$num);

$data=array();

$data=$this-getCommlist();//獲取評(píng)論列表

$this-assign("commlist",$data);

$this-display('index');

*添加評(píng)論

publicfunctionaddComment(){

$data=array();

if((isset($_POST["comment"]))(!empty($_POST["comment"]))){

$cm=json_decode($_POST["comment"],true);//通過(guò)第二個(gè)參數(shù)true，將json字符串轉(zhuǎn)化為鍵值對(duì)數(shù)組

$cm['create_time']=date('Y-m-dH:i:s',time());

$newcm=M('comment');

$id=$newcm-add($cm);

$cm["id"]=$id;

$data=$cm;

$num=M('comment')-count();//統(tǒng)計(jì)評(píng)論總數(shù)

$data['num']=$num;

}else{

$data["error"]="0";

echojson_encode($data);

*遞歸獲取評(píng)論列表

protectedfunctiongetCommlist($parent_id=0,$result=array()){

$arr=M('comment')-where("parent_id='".$parent_id."'")-order("create_timedesc")-select();

if(empty($arr)){

returnarray();

foreach($arras$cm){

$thisArr=$result[];

$cm["children"]=$this-getCommlist($cm["id"],$thisArr);

$thisArr=$cm;

return$result;

JavaScript代碼:

$(function(){

//點(diǎn)擊提交評(píng)論內(nèi)容

$('body').delegate('.comment-submit','click',function(){

varcontent=$.trim($(this).parent().prev().children("textarea").val());//根據(jù)布局結(jié)構(gòu)獲取當(dāng)前評(píng)論內(nèi)容

$(this).parent().prev().children("textarea").val("");//獲取完內(nèi)容后清空輸入框

if(""==content){

alert("評(píng)論內(nèi)容不能為空!");

}else{

varcmdata=newObject();

cmdata.parent_id=$(this).attr("parent_id");//上級(jí)評(píng)論id

cmdata.content=content;

cmdata.nickname="游客";//測(cè)試用數(shù)據(jù)

cmdata.head_pic="/Public/images/default.jpg";//測(cè)試用數(shù)據(jù)

varreplyswitch=$(this).attr("replyswitch");//獲取回復(fù)開(kāi)關(guān)鎖屬性

$.ajax({

type:"POST",

url:"/index.php/home/index/addComment",

data:{

comment:JSON.stringify(cmdata)

dataType:"json",

success:function(data){

if(typeof(data.error)=="undefined"){

$(".comment-reply").next().remove();//刪除已存在的所有回復(fù)div

//更新評(píng)論總數(shù)

$(".comment-num").children("span").html(data.num+"條評(píng)論");

//顯示新增評(píng)論

varnewli="";

if(cmdata.parent_id=="0"){

//發(fā)表的是一級(jí)評(píng)論時(shí)，添加到一級(jí)ul列表中

newli="licomment_id='"+data.id+"'divdivimgsrc='"+data.head_pic+"'alt=''/divdivdivspan"+data.nickname+"/spanspan"+data.create_time+"/span/divdivp"+data.content+"/p/divdivacomment_id='"+data.id+"'href='javascript:void(0);'回復(fù)/a/div/div/divul/ul/li

$(".comment-ul").prepend(newli);

}else{

//否則添加到對(duì)應(yīng)的孩子ul列表中

if('off'==replyswitch){//檢驗(yàn)出回復(fù)關(guān)閉鎖存在，即三級(jí)評(píng)論不再提供回復(fù)功能

newli="licomment_id='"+data.id+"'divdivimgsrc='"+data.head_pic+"'alt=''/divdivdivspan"+data.nickname+"/spanspan"+data.create_time+"/span/divdivp"+data.content+"/p/divdiv/div/div/divul/ul/li

}else{//二級(jí)評(píng)論的回復(fù)按鈕要添加回復(fù)關(guān)閉鎖屬性

newli="licomment_id='"+data.id+"'divdivimgsrc='"+data.head_pic+"'alt=''/divdivdivspan"+data.nickname+"/spanspan"+data.create_time+"/span/divdivp"+data.content+"/p/divdivacomment_id='"+data.id+"'href='javascript:void(0);'replyswitch='off'回復(fù)/a/div/div/divul/ul/li

$("li[comment_id='"+data.parent_id+"']").children("ul").prepend(newli);

}else{

//有錯(cuò)誤信息

alert(data.error);

//點(diǎn)擊"回復(fù)"按鈕顯示或隱藏回復(fù)輸入框

$("body").delegate(".comment-reply","click",function(){

if($(this).next().length0){//判斷出回復(fù)div已經(jīng)存在,去除掉

$(this).next().remove();

}else{//添加回復(fù)div

$(".comment-reply").next().remove();//刪除已存在的所有回復(fù)div

//添加當(dāng)前回復(fù)div

varparent_id=$(this).attr("comment_id");//要回復(fù)的評(píng)論id

vardivhtml="";

if('off'==$(this).attr("replyswitch")){//二級(jí)評(píng)論回復(fù)后三級(jí)評(píng)論不再提供回復(fù)功能,將關(guān)閉屬性附加到"提交回復(fù)"按鈕"

divhtml="divreplyid='2'divtextareareplyid='2'/textarea/divdivaparent_id='"+parent_id+"'href='javascript:void(0);'replyswitch='off'提交回復(fù)/a/div/div

}else{

divhtml="divreplyid='2'divtextareareplyid='2'/textarea/divdivaparent_id='"+parent_id+"'href='javascript:void(0);'提交回復(fù)/a/div/div

$(this).after(divhtml);

頁(yè)面樣式代碼:

.comment-filed{

width:640px;

margin:0auto;

.comment-num{

text-align:right;

font-size:14px;

.div-txt-submit{

text-align:right;

margin-top:8px;

.comment-submit{

background-color:#63B8FF;

margin-top:15px;

text-decoration:none;

color:#fff;

padding:5px;

font-size:14px;

.txt-commit{

border:1pxsolidblue;

width:620px;

height:60px;

padding:10px;

.txt-reply{

width:100%;

height:60px;

.comment-filed-list{

margin-top:20px;

.comment-list{

margin-top:2px;

width:herit;

height:50px;

border-top:1pxsolidgray;

.comment-ul{

list-style:none;

padding-left:0;

.head-pic{

width:40px;

height:40px;

position:relative;

top:0px;

left:40px;

top:-40px;

width:600px;

.cm-header{

padding-left:5px;

.cm-content{

padding-left:5px;

.cm-footer{

padding-bottom:15px;

text-align:right;

border-bottom:1pxdotted#CCC;

.comment-reply{

text-decoration:none;

color:gray;

font-size:14px;

.children{

list-style:none;

background-color:#FAFAFA;

padding-left:0;

margin-left:40px;

.children-cm{

position:relative;

left:40px;

top:-40px;

width:90%;

頁(yè)面布局代碼:

!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"

htmllang="en"

head

metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"

titlephp評(píng)論及回復(fù)功能/title

linkrel="stylesheet"type="text/css"href="/Public/css/comment.css"rel="externalnofollow"

scripttype="text/javascript"src="/Public/js/jquery-1.11.3.min.js"/script

scripttype="text/javascript"src="/Public/js/comment.js"/script

/head

body

div

!--發(fā)表評(píng)論區(qū)begin--

div

div

span{$num}條評(píng)論/span

/div

div

div

textareareplyid="0"/textarea

/div

div

aparent_id="0"style=""href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"spanstyle=''發(fā)表評(píng)論/span/a

/div

/div

/div

!--發(fā)表評(píng)論區(qū)end--

!--評(píng)論列表顯示區(qū)begin--

!--{$commentlist}--

div

divspan全部評(píng)論/span/div

div

!--一級(jí)評(píng)論列表begin--

volistname="commlist"id="data"

licomment_id="{$data.id}"

div

div

imgsrc="{$data.head_pic}"alt=""

/div

div

div

span{$data.nickname}/span

span{$data.create_time}/span

/div

div

{$data.content}

/div

div

acomment_id="{$data.id}"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"回復(fù)/a

/div

/div

/div

!--二級(jí)評(píng)論begin--

volistname="data.children"id="child"

licomment_id="{$child.id}"

div

div

imgsrc="{$child.head_pic}"alt=""

/div

div

div

span{$child.nickname}/span

span{$child.create_time}/span

/div

div

{$child.content}

/div

div

areplyswitch="off"comment_id="{$child.id}"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"回復(fù)/a

/div

/div

/div

!--三級(jí)評(píng)論begin--

volistname="child.children"id="grandson"

licomment_id="{$grandson.id}"

div

div

imgsrc="{$grandson.head_pic}"alt=""

/div

div

div

span{$grandson.nickname}/span

span{$grandson.create_time}/span

/div

div

{$grandson.content}

/div

div

!--acomment_id="1"href="javascript:void(0);"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"回復(fù)/a--

/div

/div

/div

/li

/volist

/ul

!--三級(jí)評(píng)論end--

/l