好的,所以我认为我已经解决了这个问题。但我仍然无法找到解决方案!
我有一个ajax支持的社交聊天应用程序,允许使用php、mysql和jquery构建评论和点赞等。但是当我发布评论时,ajax会返回一个更新了评论的重复帖子,所以当你再次评论时,你会得到多个重复的帖子。Msql条目很好(即没有重复)。我所有的其他功能和更新都很好,所以这是一个巨大的痛苦!
很抱歉代码太多了,但我只是想给你所有的信息-非常感谢所有的想法和答案!
这是起始页HTML:
<html>
<div class="usermsg">
<?php
$sql = "SELECT post.post, post.posttime, post.pid_imageurl, post.likes, user.name, comments.comment, user.uid_imageurl, comments.comment_uid, post.pid
FROM post
INNER JOIN user
ON post.uid=user.uid
LEFT JOIN comments
ON comments.comment_pid=post.pid
ORDER BY pid DESC";
$result = mysql_query($sql);
while($row=mysql_fetch_assoc($result)){?>
<?php
$pid = $row['pid'];
$formattime = date("g:i:a",$row['posttime']);
//echo $row['pid']; for testing
echo '<p class="speechbubble">'.$row['post'].'<br><br><img class= "userprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/> Posted by '.$row['name'].' at '.$formattime. '</p>';
?>
<p class="likepara">this post has <? echo $row['likes']; ?> likes <a class="like" pid=<? echo $row['pid']; ?> href="#">like</a></p>
<div class="editable" pid="<? echo $row['pid'];?>" contentEditable="true">add comment...</div>
<?php
$sql_comments = "SELECT comments.comment, comments.comment_time, user.name, user.uid_imageurl FROM comments
INNER JOIN user
ON comments.comment_uid = user.uid
WHERE comment_pid = '$pid' ORDER BY cid DESC";
$result_comments = mysql_query($sql_comments);
$numrows_comments=mysql_num_rows($result_comments);//num of rows
if($numrows_comments==0) //no comments
{
echo '<p class="commentsheader">Comments</p><br>';
echo 'This post has no comments yet, be the first!';
echo '<br><br><br><hr><br><br>';
}else{
echo '<p class="commentsheader">Comments</p><br>';
while($row=mysql_fetch_assoc($result_comments)){
$formattime_comment = date("g:i:a",$row['comment_time']);
echo '<p class="comment">'.$row['comment'].'<br><img class="commentprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/>Posted by '.$row['name']. ' at ' .$formattime_comment. '</p>';
//echo '<img class="commentprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/>'
}//$sql_comments
echo '<hr><br><br>';
}//else end
}//$sql
?>
</div><!--user msg--
</html>
jquery函数:
$(".editable").live('click', function(){
$(this).empty();
$(this).mouseout(function() {
var comment = $(this).html();
var postid = $(this).attr("pid");
var commentuserid = $("#loggedin").attr("uid");
if(comment == ""){
return false;
}else{
var datastring = 'comment=' + comment + '&postid=' + postid + '&commentuserid=' + commentuserid;
//save with ajax clear box and then load back in
$.ajax({
type: "POST",
url: "uploadcomment.php",
data: datastring,
success: function(data){
$(".usermsg").html(data);
}
});
}
});
});
更新php(基本上与正在更新的initalhtml页面相同)。
<?php
include("connectdb.php");
include_once("secure.php");
//still repeating posts when mutiple comments added?
$commentpostid = $_POST['postid'];
$commentuserid = $_POST['commentuserid'];
$comment = protect($_POST['comment']);
$time =time();
$comment = strip_tags($comment);
$time =time();
$sql_insert_comments = "INSERT INTO comments
(comment_uid, comment_pid, comment, comment_time)
VALUES
($commentuserid,$commentpostid, '$comment', $time)";
$insert_comments_result = mysql_query($sql_insert_comments);
?>
<?
$sql = "SELECT post.post, post.posttime, post.pid_imageurl, post.likes, user.name, comments.comment, user.uid_imageurl, comments.comment_uid, post.pid
FROM post
INNER JOIN user
ON post.uid=user.uid
LEFT JOIN comments
ON comments.comment_pid=post.pid
ORDER BY pid DESC";
$result = mysql_query($sql);
while($row=mysql_fetch_assoc($result)){?>
<?
$pid = $row['pid'];
$formattime = date("g:i:a",$row['posttime']);
echo '<p class="speechbubble">'.$row['post'].'<br><br><img class= "userprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/> Posted by '.$row['name'].' at '.$formattime. '</p>';
//echo '<p class="speechbubble">'.$row['post'].'</p>';
//echo '<p class="msgholder" >Posted by '.$row['name'].' at '.$formattime. '<img class= "userprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/></p>';
?>
<p class="likepara">this post has <? echo $row['likes']; ?> likes <a class="like" pid=<? echo $row['pid']; ?> href="#">like</a></p>
<div class="editable" pid="<? echo $row['pid'];?>" contentEditable="true">
add comment...
</div>
<?
$sql_comments = "SELECT comments.comment, comments.comment_time, user.name, user.uid_imageurl FROM comments
INNER JOIN user
ON comments.comment_uid = user.uid
WHERE comment_pid = '$pid' ORDER BY cid DESC";
$result_comments = mysql_query($sql_comments);
$numrows_comments=mysql_num_rows($result_comments);//num of rows
if($numrows_comments==0) //no comments
{
echo '<p class="commentsheader">Comments</p><br>';
echo 'This post has no comments yet, be the first!';
echo '<br><br><br><hr><br><br>';
}else{
echo '<p class="commentsheader">Comments</p><br>';
while($row=mysql_fetch_assoc($result_comments)){
$formattime_comment = date("g:i:a",$row['comment_time']);
//echo '<p class="comment">'.$row['comment'].'</p>';
//echo '<p class="commentposter">posted by '.$row['name']. ' at ' .$formattime_comment. '<img class="commentprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/></p>';
echo '<p class="comment">'.$row['comment'].'<br><img class="commentprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/>Posted by '.$row['name']. ' at ' .$formattime_comment. '</p>';
}//$sql_comments
echo '<hr><br><br>';
}//else end
}//$sql
?>
</div>
</div>
我认为您应该去掉update.php中的后期渲染。
编辑:我有点迷失在你的代码中。正如我所看到的,你再次完全渲染了帖子,并替换了原来的帖子。
您应该只更新注释,实际上您不必从ajax请求中获得任何html响应。一个成功/失败的标志就足够了。成功后,您可以将可编辑区域中的新评论放在评论列表的底部(或顶部)。
更新php:
include("connectdb.php");
include_once("secure.php");
//still repeating posts when mutiple comments added?
$commentpostid = protect($_POST['postid']);
$commentuserid = protect($_POST['commentuserid']);
$comment = protect($_POST['comment']);
$time =time();
$comment = strip_tags($comment);
$query = "INSERT INTO comments
(comment_uid, comment_pid, comment, comment_time)
VALUES
($commentuserid ,$commentpostid, '$comment', $time)";
if(mysql_query($sql_insert_comments))
{
echo "OK";
}
else
{
echo "FAIL";
}
您将得到"OK"或"FAIL"作为响应数据。所以你可以在JS:中做出正确的举动
$(".editable").live('click', function(){
$(this).empty();
$(this).mouseout(function() {
var comment = $(this).html();
var postid = $(this).attr("pid");
var commentuserid = $("#loggedin").attr("uid");
if(comment == ""){
return false;
}else{
var datastring = 'comment=' + comment + '&postid=' + postid + '&commentuserid=' + commentuserid;
//save with ajax clear box and then load back in
$.ajax({
type: "POST",
url: "uploadcomment.php",
data: datastring,
success: function(data){
if(data == "OK") {
//put comment into the comment list
} else {
alert('error');
}
}
});
}
});
});
你应该稍微修改一下你的评论列表。您应该将注释放入容器div中,这样您就可以使用类似的jQuery将新提交附加到列表中
$("#post_1 div.comment_container").append($("<div/>").text('comment text'))
还需要将帖子存储在签名的包装中,以便能够确定应该更新哪篇帖子的评论列表。所以页面的结构应该是这样的:
<div class="post_list">
<div class="post" id="post_1">
<!-- post body -->
<div class="comment_container">
<!-- comments -->
</div>
</div>
<div class="post" id="post_2">
<!-- post body -->
<div class="comment_container">
<!-- comments -->
</div>
</div>
<div class="post" id="post_3">
<!-- post body -->
<div class="comment_container">
<!-- comments -->
</div>
</div>
...
</div>
编辑:真正的解决方案是从您获得帖子的查询中删除"左联接注释"。联接使行相乘。
例如:你有A,B帖子,评论A<=a、 b和b<=c、 d,e。如果我是正确的,那么查询的结果将是5行。
您应该运行单独的查询来提取帖子和评论。
每次添加评论时,SELECT
都会返回一个包含原始帖子和当前评论的全新行。
分离查询不仅可以解决这一问题,还可以使获取注释及其计数的查询更加简单。
Do:
SELECT post.post, post.posttime, post.pid_imageurl, post.likes,
user.name, user.uid_imageurl, post.pid
FROM post
INNER JOIN user ON post.uid = user.uid
ORDER BY pid DESC
并将所有这些记录提取到一个数组中,然后进行
SELECT comments.comment, comments.comment_time,
user.name, user.uid_imageurl
FROM comments
INNER JOIN user ON comments.comment_uid = user.uid
WHERE comment_pid = ?
ORDER BY cid DESC
获取注释数据(以及间接的计数)