好的,所以我认为我已经解决了这个问题。但解决方案仍然逃避我!
我有一个支持 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(与正在更新的初始 html 页面基本相同)。
<?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 行。
关于php - 通过 jquery ajax 更新评论时重复帖子条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8742957/