通过jquery ajax更新评论时重复的帖子条目

时间:2012-01-05 13:03:00

标签: php jquery mysql 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(基本上与正在更新的初始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>

2 个答案:

答案 0 :(得分:1)

我认为你应该摆脱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&lt; = a,b和B&lt; = c,d,e。 如果我是正确的,查询的结果将是5行。

答案 1 :(得分:0)

您应该运行单独的查询来提取帖子和评论。

由于每次添加评论时,SELECT都会返回包含原始帖子和当前评论的全新行。

分离查询不仅可以解决这个问题,它还可以使查询更容易获得评论及其计数。

执行:

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

获取评论数据(间接计算)