当前位置：首页 > CMS教程 > Thinkphp > 列表

thinkPHP实现基于ajax的评论回复功能

发布:smiling　来源: PHP粉丝网 　添加日期：2021-10-05 12:19:38　浏览: 评论：0　

这篇文章主要介绍了thinkPHP实现基于ajax的评论回复功能,结合实例形式分析了thinkPHP实现ajax评论回复所涉及的控制器、视图、样式、js使用post进行ajax提交、并附带了相应的SQL语句,需要的朋友可以参考下。

本文实例讲述了thinkPHP实现基于ajax的评论回复功能，分享给大家供大家参考，具体如下：

控制器代码:

  1. <?php 
  2. namespace Home\Controller; 
  3. use Think\Controller; 
  4. class IndexController extends Controller { 
  5.   public function index(){ 
  6.     $num = M('comment')->count(); //获取评论总数 
  7.     $this->assign('num',$num); 
  8.     $data=array(); 
  9.     $data=$this->getCommlist();//获取评论列表 
  10.     $this->assign("commlist",$data); 
  11.     $this->display('index'); 
  12.   } 
  13.   /** 
  14.   *添加评论 
  15.   */ 
  16.   public function addComment(){ 
  17.     $data=array(); 
  18.     if((isset($_POST["comment"]))&&(!emptyempty($_POST["comment"]))){ 
  19.       $cm = json_decode($_POST["comment"],true);//通过第二个参数true，将json字符串转化为键值对数组 
  20.       $cm['create_time']=date('Y-m-d H:i:s',time()); 
  21.       $newcm = M('comment'); 
  22.       $id = $newcm->add($cm); 
  23.       $cm["id"] = $id; 
  24.       $data = $cm; 
  25.       $num = M('comment')->count();//统计评论总数 
  26.       $data['num']= $num; 
  27.     }else{ 
  28.       $data["error"] = "0"; 
  29.     } 
  30.     echo json_encode($data); 
  31.   } 
  32.   /** 
  33.   *递归获取评论列表 
  34.   */ 
  35.   protected function getCommlist($parent_id = 0,&$result = array()){ 
  36.     $arr = M('comment')->where("parent_id = '".$parent_id."'")->order("create_time desc")->select(); 
  37.     if(emptyempty($arr)){ 
  38.       return array(); 
  39.     } 
  40.     foreach ($arr as $cm) { 
  41.       $thisArr=&$result[]; 
  42.       $cm["children"] = $this->getCommlist($cm["id"],$thisArr); 
  43.       $thisArr = $cm; 
  44.     } 
  45.     return $result; 
  46.   } 
  47. } 

JavaScript代码:

  1. $(function(){ 
  2.   //点击提交评论内容 
  3.   $('body').delegate('.comment-submit','click',function(){ 
  4.     var content = $.trim($(this).parent().prev().children("textarea").val());//根据布局结构获取当前评论内容 
  5.     $(this).parent().prev().children("textarea").val("");//获取完内容后清空输入框 
  6.     if(""==content){ 
  7.       alert("评论内容不能为空!"); 
  8.     }else{ 
  9.       var cmdata = new Object(); 
  10.       cmdata.parent_id = $(this).attr("parent_id");//上级评论id 
  11.       cmdata.content = content; 
  12.       cmdata.nickname = "游客";//测试用数据 
  13.       cmdata.head_pic = "/Public/images/default.jpg";//测试用数据 
  14.       var replyswitch = $(this).attr("replyswitch");//获取回复开关锁属性 
  15.       $.ajax({ 
  16.         type:"POST", 
  17.         url:"/index.php/home/index/addComment", 
  18.         data:{ 
  19.           comment:JSON.stringify(cmdata) 
  20.         }, 
  21.         dataType:"json", 
  22.         success:function(data){ 
  23.           if(typeof(data.error)=="undefined"){ 
  24.             $(".comment-reply").next().remove();//删除已存在的所有回复div 
  25.             //更新评论总数 
  26.             $(".comment-num").children("span").html(data.num+"条评论"); 
  27.             //显示新增评论 
  28.             var newli = ""; 
  29.             if(cmdata.parent_id == "0"){ 
  30.              //发表的是一级评论时，添加到一级ul列表中 
  31.              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>"; 
  32.               $(".comment-ul").prepend(newli); 
  33.             }else{ 
  34.              //否则添加到对应的孩子ul列表中 
  35.               if('off'==replyswitch){//检验出回复关闭锁存在，即三级评论不再提供回复功能 
  36.                 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>"; 
  37.               }else{//二级评论的回复按钮要添加回复关闭锁属性 
  38.                 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>"; 
  39.               } 
  40.               $("li[comment_id='"+data.parent_id+"']").children("ul").prepend(newli); 
  41.             } 
  42.           }else{ 
  43.             //有错误信息 
  44.             alert(data.error); 
  45.           } 
  46.         } 
  47.       }); 
  48.     } 
  49.   }); 
  50.   //点击"回复"按钮显示或隐藏回复输入框 
  51.   $("body").delegate(".comment-reply","click",function(){ 
  52.     if($(this).next().length>0){//判断出回复div已经存在,去除掉 
  53.       $(this).next().remove(); 
  54.      }else{//添加回复div 
  55.       $(".comment-reply").next().remove();//删除已存在的所有回复div 
  56.       //添加当前回复div 
  57.       var parent_id = $(this).attr("comment_id");//要回复的评论id 
  58.       var divhtml = ""; 
  59.       if('off'==$(this).attr("replyswitch")){//二级评论回复后三级评论不再提供回复功能,将关闭属性附加到"提交回复"按钮" 
  60.         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;background-color:#63B8FF;' href='javascript：void(0);' replyswitch='off' >提交回复</a></div></div>"; 
  61.       }else{ 
  62.         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;background-color:#63B8FF;' href='javascript：void(0);'>提交回复</a></div></div>"; 
  63.       } 
  64.       $(this).after(divhtml); 
  65.      } 
  66.   }); 
  67. }) 

页面样式代码:

  1. .comment-filed{ 
  2.   width:640px; 
  3.   margin:0 auto; 
  4. } 
  5. .comment-num{ 
  6.   text-align: right; 
  7.   font-size:14px; 
  8. } 
  9. .div-txt-submit{ 
  10.   text-align:right; 
  11.   margin-top:8px; 
  12. } 
  13. .comment-submit{ 
  14.   background-color:#63B8FF; 
  15.   margin-top:15px; 
  16.   text-decoration:none; 
  17.   color:#fff; 
  18.   padding:5px; 
  19.   font-size:14px; 
  20. } 
  21. .txt-commit{ 
  22.   border:1px solid blue; 
  23.   width:620px; 
  24.   height: 60px; 
  25.   padding: 10px; 
  26. } 
  27. .txt-reply{ 
  28.   width: 100%; 
  29.   height: 60px; 
  30. } 
  31. .comment-filed-list{ 
  32.   margin-top:20px; 
  33. } 
  34. .comment-list{ 
  35.   margin-top:2px; 
  36.   width:herit; 
  37.   height:50px; 
  38.   border-top:1px solid gray; 
  39. } 
  40. .comment-ul{ 
  41.   list-style:none; 
  42.   padding-left:0; 
  43. } 
  44. .head-pic{ 
  45.   width:40px; 
  46.   height:40px; 
  47. } 
  48. .cm{ 
  49.   position:relative; 
  50.   top:0px; 
  51.   left:40px; 
  52.   top:-40px; 
  53.   width:600px; 
  54. } 
  55. .cm-header{ 
  56.   padding-left:5px; 
  57. } 
  58. .cm-content{ 
  59.   padding-left:5px; 
  60. } 
  61. .cm-footer{ 
  62.   padding-bottom:15px; 
  63.   text-align:right; 
  64.   border-bottom: 1px dotted #CCC; 
  65. } 
  66. .comment-reply{ 
  67.   text-decoration:none; 
  68.   color:gray; 
  69.   font-size: 14px; 
  70. } 
  71. .children{ 
  72.   list-style:none; 
  73.   background-color:#FAFAFA; 
  74.   padding-left:0; 
  75.   margin-left:40px; 
  76. } 
  77. .children-cm{ 
  78.   position:relative; 
  79.   left:40px; 
  80.   top:-40px; 
  81.   width:90%; 
  82. } 

页面布局代码:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
  5.   <title>php评论及回复功能</title> 
  6.   <link rel="stylesheet" type="text/css" href="/Public/css/comment.css" rel="external nofollow" > 
  7.   <script type="text/javascript" src="/Public/js/jquery-1.11.3.min.js" ></script> 
  8.   <script type="text/javascript" src="/Public/js/comment.js" ></script> 
  9. </head> 
  10. <body> 
  11. <div class="comment-filed"> 
  12.  <!--发表评论区begin--> 
  13.  <div> 
  14.   <div class="comment-num"> 
  15.     <span>{$num}条评论</span> 
  16.   </div> 
  17.   <div> 
  18.     <div> 
  19.     <textarea class="txt-commit" replyid="0"></textarea> 
  20.     </div> 
  21.     <div class="div-txt-submit"> 
  22.       <a class="comment-submit" parent_id="0" style="" href="javascript：void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span style=''>发表评论</span></a> 
  23.     </div> 
  24.   </div> 
  25.  </div> 
  26.  <!--发表评论区end--> 
  27.  <!--评论列表显示区begin--> 
  28.   <!-- {$commentlist} --> 
  29.   <div class="comment-filed-list" > 
  30.     <div><span>全部评论</span></div> 
  31.     <div class="comment-list" > 
  32.       <!--一级评论列表begin--> 
  33.       <ul class="comment-ul"> 
  34.         <volist name="commlist" id="data"> 
  35.           <li comment_id="{$data.id}"> 
  36.           <div > 
  37.             <div> 
  38.               <img class="head-pic" src="{$data.head_pic}" alt=""> 
  39.             </div> 
  40.             <div class="cm"> 
  41.               <div class="cm-header"> 
  42.               <span>{$data.nickname}</span> 
  43.               <span>{$data.create_time}</span> 
  44.               </div> 
  45.               <div class="cm-content"> 
  46.                 <p> 
  47.                   {$data.content} 
  48.                 </p> 
  49.               </div> 
  50.               <div class="cm-footer"> 
  51.                 <a class="comment-reply" comment_id="{$data.id}" href="javascript：void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a> 
  52.               </div> 
  53.             </div> 
  54.           </div> 
  55.           <!--二级评论begin--> 
  56.           <ul class="children"> 
  57.             <volist name="data.children" id="child" > 
  58.             <li comment_id="{$child.id}"> 
  59.               <div > 
  60.                 <div> 
  61.                   <img class="head-pic" src="{$child.head_pic}" alt=""> 
  62.                 </div> 
  63.                 <div class="children-cm"> 
  64.                   <div class="cm-header"> 
  65.                   <span>{$child.nickname}</span> 
  66.                   <span>{$child.create_time}</span> 
  67.                   </div> 
  68.                   <div class="cm-content"> 
  69.                     <p> 
  70.                       {$child.content} 
  71.                     </p> 
  72.                   </div> 
  73.                   <div class="cm-footer"> 
  74.                     <a class="comment-reply" replyswitch="off" comment_id="{$child.id}" href="javascript：void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a> 
  75.                   </div> 
  76.                 </div> 
  77.               </div> 
  78.               <!--三级评论begin--> 
  79.               <ul class="children"> 
  80.                 <volist name="child.children" id="grandson" > 
  81.                 <li comment_id="{$grandson.id}"> 
  82.                   <div > 
  83.                     <div> 
  84.                       <img class="head-pic" src="{$grandson.head_pic}" alt=""> 
  85.                     </div> 
  86.                     <div class="children-cm"> 
  87.                       <div class="cm-header"> 
  88.                       <span>{$grandson.nickname}</span> 
  89.                       <span>{$grandson.create_time}</span> 
  90.                       </div> 
  91.                       <div class="cm-content"> 
  92.                         <p> 
  93.                           {$grandson.content} 
  94.                         </p> 
  95.                       </div> 
  96.                       <div class="cm-footer"> 
  97.                         <!-- <a class="comment-reply" comment_id="1" href="javascript：void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回复</a> --> 
  98.                       </div> 
  99.                     </div> 
  100.                   </div> 
  101.                 </li> 
  102.                 </volist> 
  103.               </ul> 
  104.               <!--三级评论end--> 
  105.             </li> 
  106.             </volist> 
  107.           </ul> 
  108.           <!--二级评论end--> 
  109.         </li> 
  110.         </volist> 
  111.       </ul> 
  112.       <!--一级评论列表end--> 
  113.     </div> 
  114.   </div> 
  115.  <!--评论列表显示区end--> 
  116. </div> 
  117. </body> 
  118. </html> 

sql语句:

  1. DROP TABLE IF EXISTS `t_comment`; 
  2. CREATE TABLE `t_comment` ( 
  3.  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id', 
  4.  `parent_id` int(11) NOT NULL COMMENT '上级评论id,若是一级评论则为0', 
  5.  `nickname` varchar(100) DEFAULT NULL COMMENT '评论人昵称', 
  6.  `head_pic` varchar(400) DEFAULT NULL COMMENT '评论人头像', 
  7.  `content` text COMMENT '评论内容', 
  8.  `create_time` datetime DEFAULT NULL COMMENT '评论或回复发表时间', 
  9.  PRIMARY KEY (`id`) 
  10. ) ENGINE=MyISAM AUTO_INCREMENT=148 DEFAULT CHARSET=utf8; 

页面布局少一个jquery.js请自行加上。

Tags: thinkPHP评论回复 ajax评论回复

分享到：

推荐文章

热门文章

最新评论文章