Thinkphp ajax實現評論回複

標籤：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　這個是控制器代碼

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

<?phpnamespace Home\Controller;use Think\Controller;class IndexController extends Controller {public function index(){$num = M(‘comment‘)->count(); //擷取評論總數$this->assign(‘num‘,$num);$data=array();$data=$this->getCommlist();//擷取評論列表$this->assign("commlist",$data);$this->display(‘index‘);} /***添加評論*/public function addComment(){ $data=array();if((isset($_POST["comment"]))&&(!empty($_POST["comment"]))){$cm = json_decode($_POST["comment"],true);//通過第二個參數true，將json字串轉化為索引值對數組$cm[‘create_time‘]=date(‘Y-m-d H:i:s‘,time());$newcm = M(‘comment‘);$id = $newcm->add($cm); $cm["id"] = $id;$data = $cm; $num = M(‘comment‘)->count();//統計評論總數$data[‘num‘]= $num; }else{$data["error"] = "0";}  echo json_encode($data);}   /***遞迴擷取評論列表*/protected function getCommlist($parent_id = 0,&$result = array()){$arr = M(‘comment‘)->where("parent_id = ‘".$parent_id."‘")->order("create_time desc")->select();if(empty($arr)){return array();}foreach ($arr as $cm) {$thisArr=&$result[];$cm["children"] = $this->getCommlist($cm["id"],$thisArr);$thisArr = $cm;}return $result;} }

 

　這個是javascript代碼

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

$(function(){ //點擊提交評論內容$(‘body‘).delegate(‘.comment-submit‘,‘click‘,function(){var content = $.trim($(this).parent().prev().children("textarea").val());//根據布局結構擷取當前評論內容$(this).parent().prev().children("textarea").val("");//擷取完內容後清空輸入框if(""==content){alert("評論內容不可為空!");}else{var cmdata = new Object();cmdata.parent_id = $(this).attr("parent_id");//上級評論idcmdata.content = content;cmdata.nickname = "遊客";//測試用資料cmdata.head_pic = "/Public/images/default.jpg";//測試用資料var replyswitch = $(this).attr("replyswitch");//擷取回複開關鎖屬性 $.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();//刪除已存在的所有回複div//更新評論總數$(".comment-num").children("span").html(data.num+"條評論");//顯示新增評論var newli = "";if(cmdata.parent_id == "0"){//發表的是一級評論時，添加到一級ul列表中newli = "<li comment_id=‘"+data.id+"‘><div ><div><img class=‘head-pic‘ src=‘"+data.head_pic+"‘ alt=‘‘></div><div class=‘cm‘><div class=‘cm-header‘><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class=‘cm-content‘><p>"+data.content+"</p></div><div class=‘cm-footer‘><a class=‘comment-reply‘ comment_id=‘"+data.id+"‘ href=‘javascript:void(0);‘>回複</a></div></div></div><ul class=‘children‘></ul></li>";$(".comment-ul").prepend(newli);}else{//否則添加到對應的孩子ul列表中if(‘off‘==replyswitch){//檢驗出回複關閉鎖存在，即三級評論不再提供回複功能newli = "<li comment_id=‘"+data.id+"‘><div ><div><img class=‘head-pic‘ src=‘"+data.head_pic+"‘ alt=‘‘></div><div class=‘children-cm‘><div class=‘cm-header‘><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class=‘cm-content‘><p>"+data.content+"</p></div><div class=‘cm-footer‘></div></div></div><ul class=‘children‘></ul></li>";}else{//二級評論的回複按鈕要添加回複關閉鎖屬性newli = "<li comment_id=‘"+data.id+"‘><div ><div><img class=‘head-pic‘ src=‘"+data.head_pic+"‘ alt=‘‘></div><div class=‘children-cm‘><div class=‘cm-header‘><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class=‘cm-content‘><p>"+data.content+"</p></div><div class=‘cm-footer‘><a class=‘comment-reply‘ comment_id=‘"+data.id+"‘ href=‘javascript:void(0);‘ replyswitch=‘off‘ >回複</a></div></div></div><ul class=‘children‘></ul></li>";}$("li[comment_id=‘"+data.parent_id+"‘]").children("ul").prepend(newli);} }else{//有錯誤資訊alert(data.error);} }});}  });   //點擊"回複"按鈕顯示或隱藏回複輸入框$("body").delegate(".comment-reply","click",function(){if($(this).next().length>0){//判斷出回複div已經存在,去除掉$(this).next().remove();}else{//添加回複div$(".comment-reply").next().remove();//刪除已存在的所有回複div//添加當前回複divvar parent_id = $(this).attr("comment_id");//要回複的評論id var divhtml = "";if(‘off‘==$(this).attr("replyswitch")){//二級評論回複後三級評論不再提供回複功能,將關閉屬性附加到"提交回複"按鈕"divhtml = "<div class=‘div-reply-txt‘ style=‘width:98%;padding:3px;‘ replyid=‘2‘><div><textarea class=‘txt-reply‘ replyid=‘2‘ style=‘width: 100%; height: 60px;‘></textarea></div><div style=‘margin-top:5px;text-align:right;‘><a class=‘comment-submit‘ parent_id=‘"+parent_id+"‘ style=‘font-size:14px;text-decoration:none;‘ href=‘javascript:void(0);‘ replyswitch=‘off‘ >提交回複</a></div></div>";}else{divhtml = "<div class=‘div-reply-txt‘ style=‘width:98%;padding:3px;‘ replyid=‘2‘><div><textarea class=‘txt-reply‘ replyid=‘2‘ style=‘width: 100%; height: 60px;‘></textarea></div><div style=‘margin-top:5px;text-align:right;‘><a class=‘comment-submit‘ parent_id=‘"+parent_id+"‘ style=‘font-size:14px;text-decoration:none;‘ href=‘javascript:void(0);‘>提交回複</a></div></div>";}$(this).after(divhtml);}}); })

這個是頁面樣式代碼 .comment-filed{width:640px;margin:0 auto;} .comment-num{text-align: right;font-size:14px;}.div-txt-submit{text-align:right;margin-top:8px; } .comment-submit{ margin-top:15px;text-decoration:none;color:#fff;padding:5px;font-size:14px;} .txt-commit{border:1px solid blue;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:1px solid gray;} .comment-ul{list-style:none;padding-left:0;} .head-pic{width:40px;height:40px;} .cm{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: 1px dotted #CCC;} .comment-reply{text-decoration:none;color:gray;font-size: 14px;} .children{list-style:none; padding-left:0;margin-left:40px;} .children-cm{position:relative;left:40px;top:-40px;width:90%;} 這個是頁面配置代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>php評論及回複功能</title><link rel="stylesheet" type="text/css" href="/Public/css/comment.css"><script type="text/javascript" src="/Public/js/jquery-1.11.3.min.js" ></script><script type="text/javascript" src="/Public/js/comment.js" ></script></head><body> <div class="comment-filed"><!--發表評論區begin--><div><div class="comment-num"><span>{$num}條評論</span></div><div><div><textarea class="txt-commit" replyid="0"></textarea></div><div class="div-txt-submit"><a class="comment-submit" parent_id="0" style="" href="javascript:void(0);"><span style=‘‘>發表評論</span></a></div></div></div><!--發表評論區end--> <!--評論列表顯示區begin--><!-- {$commentlist} --><div class="comment-filed-list" ><div><span>全部評論</span></div><div class="comment-list" ><!--一級評論列表begin--><ul class="comment-ul"><volist name="commlist" id="data"><li comment_id="{$data.id}"><div ><div><img class="head-pic" src="{$data.head_pic}" ></div><div class="cm"><div class="cm-header"><span>{$data.nickname}</span><span>{$data.create_time}</span></div><div class="cm-content"><p>{$data.content}</p></div><div class="cm-footer"><a class="comment-reply" comment_id="{$data.id}" href="javascript:void(0);">回複</a></div></div></div> <!--二級評論begin--><ul class="children"><volist name="data.children" id="child" ><li comment_id="{$child.id}"><div ><div><img class="head-pic" src="{$child.head_pic}" ></div><div class="children-cm"><div class="cm-header"><span>{$child.nickname}</span><span>{$child.create_time}</span></div><div class="cm-content"><p>{$child.content}</p></div><div class="cm-footer"><a class="comment-reply" replyswitch="off" comment_id="{$child.id}" href="javascript:void(0);">回複</a></div></div></div> <!--三級評論begin--><ul class="children"><volist name="child.children" id="grandson" ><li comment_id="{$grandson.id}"><div ><div><img class="head-pic" src="{$grandson.head_pic}" ></div><div class="children-cm"><div class="cm-header"><span>{$grandson.nickname}</span><span>{$grandson.create_time}</span></div><div class="cm-content"><p>{$grandson.content}</p></div><div class="cm-footer"><!-- <a class="comment-reply" comment_id="1" href="javascript:void(0);">回複</a> --></div></div></div></li></volist></ul><!--三級評論end--> </li></volist></ul><!--二級評論end--> </li></volist></ul><!--一級評論列表end--></div></div><!--評論列表顯示區end--></div></body></html>

 

這個是sql語句

1 2 3 4 5 6 7 8 9 10 11

DROP TABLE IF EXISTS `t_comment`; CREATE TABLE `t_comment` (`id` int(11) NOT NULL AUTO_INCREMENT COMMENT ‘主鍵id‘,`parent_id` int(11) NOT NULL COMMENT ‘上級評論id,若是一級評論則為0‘,`nickname` varchar(100) DEFAULT NULL COMMENT ‘評論人暱稱‘,`head_pic` varchar(400) DEFAULT NULL COMMENT ‘評論人頭像‘,`content` text COMMENT ‘評論內容‘,`create_time` datetime DEFAULT NULL COMMENT ‘評論或回複發表時間‘,PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=148 DEFAULT CHARSET=utf8;

Thinkphp ajax實現評論回複