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

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

控制器代码:

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;

}

}

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%;

}

页面布局代码:

php评论及回复功能

{$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;

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

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。