当通过jqueryajax更新评论时,会出现重复的帖子条目


duplicate post entries when comment updated via jquery ajax

好的,所以我认为我已经解决了这个问题。但我仍然无法找到解决方案!

我有一个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

获取注释数据(以及间接的计数)