Thinkphp ajax实现评论回复

这个是控制器代码

  
  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代码

$(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");//上级评论id
			cmdata.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 = "

    
    

     
     

      
      
     
     
     
     

      
      

       
       "+data.nickname+"
       
       "+data.create_time+"
      
      
      
      

       
       
"+data.content+"
      
      
      
      

       
       回复
      
      
     
     
    
    
    
    
";							
							$(".comment-ul").prepend(newli);
						}else{
						 //否则添加到对应的孩子ul列表中							 
						 	if('off'==replyswitch){//检验出回复关闭锁存在，即三级评论不再提供回复功能						 	
						 		newli = "

    
    

     
     

      
      
     
     
     
     

      
      

       
       "+data.nickname+"
       
       "+data.create_time+"
      
      
      
      

       
       
"+data.content+"
      
      
      
      

     
     
    
    
    
    
";
						 	}else{//二级评论的回复按钮要添加回复关闭锁属性					 	
						 		newli = "

    
    

     
     

      
      
     
     
     
     

      
      

       
       "+data.nickname+"
       
       "+data.create_time+"
      
      
      
      

       
       
"+data.content+"
      
      
      
      

       
       回复
      
      
     
     
    
    
    
    
";
						 	}						 	
						 	$("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	
		 	//添加当前回复div
		 	var parent_id = $(this).attr("comment_id");//要回复的评论id
		 	
		 	var divhtml = "";
		 	if('off'==$(this).attr("replyswitch")){//二级评论回复后三级评论不再提供回复功能,将关闭属性附加到"提交回复"按钮"
		 		divhtml = "
   
   

    
    

     
     
    
    
    
    

     
     提交回复
    
    
   
   
";
		 	}else{
		 		divhtml = "
   
   

    
    

     
     
    
    
    
    

     
     提交回复
    
    
   
   
";
		 	}		 	
			$(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{
	background-color:#63B8FF;
	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;
	background-color:#FAFAFA;
	padding-left:0;
	margin-left:40px;
}

.children-cm{
	position:relative;	
	left:40px;
	top:-40px;
	width:90%;
}

这个是页面布局代码

	
     
     
	
	 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>




     
     

  
      
      
  
      
      

	
       
       

		
        
        {$num}条评论
	
       
       
	
       
       

		
        
        

		
         
         
		
        
        
		
        
        

			
         
         发表评论
		
        
        
		
	
       
       
  
      
      
  
      
      

  
      
      
  	
      
      
  	
      
      

	  	
       
       

        
        全部评论
       
       
	  	
       
       

	  		
        
        
	  		
        
        
 
           
 
            
 
              
            
 
            
 
             
 
              {$data.nickname} 
              {$data.create_time} 
             
 
             
 
              
 {$data.content} 
 
             
 
             
 
              回复 
             
 
            
 
           
 
            
           
 
              
 
               
 
                 
               
 
               
 
                
 
                 {$child.nickname} 
                 {$child.create_time} 
                
 
                
 
                 
 {$child.content} 
 
                
 
                
 
                 回复 
                
 
               
 
              
 
               
              
 
                 
 
                  
 
                    
                  
 
                  
 
                   
 
                    {$grandson.nickname} 
                    {$grandson.create_time} 
                   
 
                   
 
                    
 {$grandson.content} 
 
                   
 
                   
 
                     
                   
 
                  
 
                 
 
 
               
 
            
	  		
        
        
	  	
       
       
		
  	
      
      
  
      
      

     
     
	

这个是sql语句

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框架完成实现的，大家有什么更好的实现可以在下面给我留言，谢谢！页面布局少一个jquery.js请自行加上。