Question

我正在尝试创建一个setInterval函数来检查新评论，选择并发布它们。到目前为止，它是“有点”工作，但不是我想要的。它正在做的是每三秒钟重新发布我的所有评论，而不是仅仅刷新它们。

我为此做错了不只是刷新评论吗？

HTML

<form action="" method="POST" id="comment-form">
            <textarea id="home_comment" name="comment" placeholder="Write a comment..." maxlength="1000" required></textarea><br>
            <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
            <input id="comment-button" name="submit" type="submit" value="Post">
        </form>
        <div id="comment-container">

AJAX

function commentRetrieve(){

$.ajax({ 
        url: "ajax-php/comment-retrieve.php",
        type: "get",
        success: function (data) {
        //  console.log(data);
            if (data == "Error!") {
                alert("Unable to retrieve comment!");
                alert(data);
            } else {
                $('#comment-container').prepend(data);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(textStatus + " | " + errorThrown);
            console.log("error"); //otherwise error if status code is other than 200.
        }
    });


}
setInterval(commentRetrieve, 300);

PHP

$user = new User();

    $select_comments_sql = "
    SELECT c. *, p.user_id, p.img
    FROM home_comments AS c
    INNER JOIN (SELECT max(id) as id, user_id 
                FROM profile_img 
                GROUP BY user_id) PI
      on PI.user_id = c.user_id
    INNER JOIN profile_img p
      on PI.user_id = p.user_id
     and PI.id = p.id
    ORDER BY c.id DESC
";

if ($select_comments_stmt = $con->prepare($select_comments_sql)) {
    //$select_comments_stmt->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $select_comments_stmt->execute();
    //$select_comments_stmt->bind_result($comment_id, $comment_user_id, $comment_username, $home_comments, $comment_date, $commenter_user_id, $commenter_img);  
    //$comment_array = array();
    $rows = $select_comments_stmt->fetchAll(PDO::FETCH_ASSOC);
    foreach ($rows as $row) {
        $comment_id = $row['id'];
        $comment_user_id = $row['user_id'];
        $comment_username = $row['username'];
        $home_comments = $row['comment'];
        $comment_date = $row['date'];
        $commenter_user_id = $row['user_id'];
        $commenter_img = $row['img'];
        $commenter_img = '<img class="home-comment-profile-pic" src=" '.$commenter_img.'">';
        if ($home_comments === NULL) {
            echo 'No comments found.';
        } else {
            echo '<div class="comment-post-box">';
            echo $commenter_img;
            echo '<div class="comment-post-username">'.$comment_username. '</div>';
            echo '<div>'.$comment_date. '</div>';
            echo '<div class="comment-post-text">'.$home_comments. '</div>';
            echo '</div>';
        }   
    }
}

Answer 1

这是因为当你有评论时你会打印新的评论。我建议做的是使用JSON获取comments数组，将ID传递给每个注释，并检查Id是否已经存在于列表中。这样你只需粘贴新的评论，这是一个例子：
html

<form action="" method="POST" id="comment-form">
        <textarea id="home_comment" name="comment" placeholder="Write a comment..." maxlength="1000" required></textarea><br>
        <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
        <input id="comment-button" name="submit" type="submit" value="Post">
    </form>
    <div id="comment-container">
        <div id="comment-1">bla bla bla</div>
    </div>

JS

function commentRetrieve(){

$.ajax({ 
    url: "ajax-php/comment-retrieve.php",
    type: "get",
    success: function (data) {
    //  console.log(data);
        if (data == "Error!") {
            alert("Unable to retrieve comment!");
            alert(data);
        } else {
            var array = JSON.parse(data);
            $(array).each(function($value) {
                if($('#comment-container').find('#comment-' + $value.id).length == 0) {
                    $('#comment-container').prepend($value.html);
                }
            });
        }
    },
    error: function (xhr, textStatus, errorThrown) {
        alert(textStatus + " | " + errorThrown);
        console.log("error"); //otherwise error if status code is other than 200.
    }
});


}
setInterval(commentRetrieve, 300);

PHP

$user = new User();

$select_comments_sql = "
SELECT c. *, p.user_id, p.img
FROM home_comments AS c
INNER JOIN (SELECT max(id) as id, user_id 
            FROM profile_img 
            GROUP BY user_id) PI
  on PI.user_id = c.user_id
INNER JOIN profile_img p
  on PI.user_id = p.user_id
 and PI.id = p.id
ORDER BY c.id DESC
";

if ($select_comments_stmt = $con->prepare($select_comments_sql)) {
//$select_comments_stmt->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$select_comments_stmt->execute();
//$select_comments_stmt->bind_result($comment_id, $comment_user_id, $comment_username, $home_comments, $comment_date, $commenter_user_id, $commenter_img);  
//$comment_array = array();
$rows = $select_comments_stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($rows as $row) {
    $comment_id = $row['id'];
    $comment_user_id = $row['user_id'];
    $comment_username = $row['username'];
    $home_comments = $row['comment'];
    $comment_date = $row['date'];
    $commenter_user_id = $row['user_id'];
    $commenter_img = $row['img'];
    $commenter_img = '<img class="home-comment-profile-pic" src=" '.$commenter_img.'">';
    if ($home_comments === NULL) {
        echo 'No comments found.';
    } else {
        $html = "";
        $html .= '<div class="comment-post-box">';
        $html .= $commenter_img;
        $html .= '<div class="comment-post-username">'.$comment_username. '</div>';
        $html .= '<div>'.$comment_date. '</div>';
        $html .= '<div class="comment-post-text">'.$home_comments. '</div>';
        $html .= '</div>';
        array('id' => $comment_id, 'html' => $html) 
    }   
}
}

为了更好的改进，我建议调查NodeJs套接字以获得更多实时更新。这是一些链接。

Official NodeJs Website
Official SocketIo Website
Chat tutorial with socketIo and Nodejs
希望它有所帮助！

尼克

使用setInterval刷新页面

1 个答案: