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

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

}

}

　这个是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");//上级评论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;‘ 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;
时间： 2025-01-01 12:25:29

Thinkphp ajax实现评论回复的相关文章

ThinkPHP带表情无限级评论回复

今天就tp中(含表情)无限级评论回复做一个个人总结. 1.准备TP基本框架 2.数据库,数据表的建立 A.先说说数据库(表)的建立. a-1,数据库:blog a-2,数据表:bolg_comment. 建立如下: CREATE TABLE IF NOT EXISTS `blog_comment` ( `id` int(10) NOT NULL AUTO_INCREMENT, `content` varchar(500) NOT NULL, `pid` int(10) NOT NULL, `em

Django使用Ajax实现页面无刷新评论回复功能

虽然Django本身自带Form可以提交表单,但在Django中结合Jquery使用Ajax,可以让Django开发的应用发挥更好的用户体验,同时可以降低服务器的负担.普通提交表单方式需要刷新整个页面才可以将评论显示出来,而使用Ajax提交评论之后,可以在页面无刷新的情况下显示出来. 首先是model: class Replay(models.Model): content = models.TextField() post = models.ForeignKey(Post) replay_ti

js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

Django使用Ajax实现页面无刷新评论回复功能 http://www.cnblogs.com/mfc-itblog/p/5188900.html js界面刷新 http://www.cnblogs.com/dingdingo/archive/2011/10/26/2225307.html js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

ajax 显示评论并制作翻页

修改后台评论模型 创建search方法 //取出一件商品的评论 public function search($goodsId,$pageSize=5) { //要做ajax翻页 所以要自己写 $where['a.goods_id']=array('eq',$goodsId); //取出总的记录数 $count=$this->where($where)->count(); //计算总的页数 $pageCount=ceil($count / $pageSize); //获取当前页 $curren

博客项目实现文章评论功能(重点是评论回复)

我开发的博客网站的地址:http://118.89.29.170/RiXiang_blog/ 博客项目代码github:https://github.com/SonnAdolf/sonne_blog 有了我的已成型的项目和代码,可以更容易理解这篇文章. 本篇文章记录下自己博客项目评论功能实现的全过程,重点其实是评论回复功能. [一,写评论] 写评论部分我没有使用富文本编辑器,只是单纯地使用了textarea标签,所以后台不需要作html标签的白名单检验(关于防范xss攻击,可以看我之前的一篇文章

WordPress添加评论回复的电子邮件警报通知

评论回复帖子,主动发送电子邮件通知评论员,这是提高的一大举措的用户体验.倡导孟一直在使用Willin Kan主评论回复电子邮件警报通知码,我相信很多人也使用,假设你没有使用.最好的尝试. 根据自己的需要,选择一个代码,根据自己的需要,新增的主题 functions.php 或者 pluggable.php(推荐) 文件的 最后一个 ?> 前面就可以: 方法一:全部回复都发送邮件通知 默认全部填写了邮箱的评论都将发邮件提醒评论人,没有不论什么勾选设置. /* comment_mail_notify

php评论回复功能

这里只实现简单的评论回复功能,并没有设置用户权限,关于权限问题前边的注册登录已经详细的介绍过,所以这里不做赘述: 首先我们要在数据库先建两张表,分别是pinglun表与huifu表: 建立完两张表后,开始写评论模块,首先是建立表单,用文本域显示评论内容,然后用按钮提交到数据库: <form action="pingchuli.php" method="post"> <input type="text" hidden="

纯代码实现WordPress评论回复自动添加@评论者的功能

先看看效果: 这个有什么用呢?添加了@功能之后那些用户评论之间的层次关系就很清晰了,我们可以清楚地知道这些评论是谁发给谁的. 其实主要是为了提升逼格. 实现方法: 将下面代码加入function.php中即可 1 2 3 4 5 6 7 8 9 //为你的评论回复添加@功能 function shenjie_com_comment_add_at( $comment_text, $comment = '') {  if( $comment->comment_parent > 0) { /*下面这

ThinkPHP Ajax

备注: ThinkAjax.sendForm 已经不提倡使用了,建议使用 jquery AJAX. ThinkPHP Ajax 使用详解及实例 : ThinkAjax.sendForm http://www.5idev.com/p-thinkphp_ajax.shtml ThinkPHP success/error 方法返回 Ajax 信息 http://www.5idev.com/p-thinkphp_ajax_success_error.shtml ThinkPHP JQuery Ajax