Thinkphp ajax实现评论回复

控制器代码:

<?php
namespace 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;
    }

}
  • 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

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 = "<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    
            //添加当前回复div
            var 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;background-color:#63B8FF;' 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;background-color:#63B8FF;' href='javascript:void(0);'>提交回复</a></div></div>";
            }           
            $(this).after(divhtml);
         }
    });

})
  • 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

页面样式代码:

.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%;
}
  • 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

页面布局代码:

<!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}" 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>

                    <!--二级评论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}" alt=""> 
                                </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}" alt="">  
                                        </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>
  • 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

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;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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

阅读更多
个人分类: think php
想对作者说点什么? 我来说一句

Thinkphp带表情无限评论回复

2016年07月27日 2.91MB 下载

没有更多推荐了,返回首页

不良信息举报

Thinkphp ajax实现评论回复

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭