Question

请大家帮我解决这个问题：我有一个页面，使用ajax和setInterval函数从数据库加载用户注释每5秒刷新一次页面。每条评论都会在下方显示动态生成的回复按钮在点击时淡出显示回复textarea字段。我想要实现的是每隔5秒就将按钮排除在内容旁边。这是因为当单击回复按钮并且显示回复文本区域以便键入回复时，在5 页面刷新秒，textarea关闭，按钮返回。这是我的fetch_posts.php文件：

    <?php
    require ("includes/conn.php");
                $stmt=$conn->prepare("SELECT post_id, name, topic, post, time FROM posts ORDER BY time DESC");
                $stmt->execute();
                $result = $stmt->get_result();
                $num_of_rows = $result->num_rows;
                if ($num_of_rows > 0){
                    while ($row = $result->fetch_assoc()){
                        $id = $row['post_id'];
                        $name = $row['name'];
                        $topic = $row['topic'];
                        $post = $row['post'];
                        $time = strtotime($row['time']);
                        $time = date('d M, H:i a', $time);
            ?>
                    <div class="col-md-1">
                        <img src="images/human_avtr.png" alt="image" width="50px" height="50px" background="#FC6806">
                    </div>
                    <div class="col-md-11">
                        <h5 style="color:#FC6806"><strong><?php echo ucfirst($name); ?></strong></h5><h6 style="color:#FC6806"><?php echo $time; ?></h6>
                        <h5 style="color:#0269C2"><strong><?php echo ucfirst($topic); ?></strong></h5>
                        <p><?php echo $post; ?></p>
                    </div>
                    <div class="row col-md-offset-2 col-xs-offset-2">
                        <button type="button" class="btn btn-primary" id="reply_button">Reply</button>
                    </div>
                    <div class="row reply_txt" style="clear:both">
                        <div class="col-md-6 col-md-offset-1" id="rep_fields">
                            <textarea class="form-control" id="comment_reply" rows="3"></textarea><br/>
                            <button type="submit" class="btn btn-primary" id="send_reply">Reply Comment</button>
                            <button type="submit" class="btn btn-danger" id="cancel_reply">Cancel</button>
                        </div>
                    </div>
          <?php }
                }
           ?>
<script>
     $(".reply_txt").hide();
</script>

在这里我的jquery淡出帖子回复按钮，显示回复textarea，获取数据并设置SetInterval函数。

 $(document).on("click", "button#reply_button", function(e){
            e.preventDefault();
            var reply_button = $(this).closest('div');
            var reply_field = reply_button.next(".reply_txt");
            $(reply_button).fadeOut();
            $(reply_field).fadeIn();
        });
function fetchPosts(){
        $.ajax({
            url: "fetch_posts.php",
            type: "POST",
            data: {},
            success: function(data){
                $("#show_comments").html(data);
                 fetchPosts();
            }
        });
    }
    setInterval(fetchPosts, 5000);

Answer 1

我建议重写代码，让fetch_posts.php返回帖子信息的JSON String，并让$ .ajax成功函数为帖子创建HTML。这样，您可以在服务器和客户端之间传递较少的数据，并且可以使用Javascript按ID解析数据并附加新帖子，而不是覆盖所有现有帖子。我甚至会将$ .ajax请求告诉fetch_posts.php最新帖子是什么，并将MySQL查询更改为仅提取新帖子。

编辑以帮助您开始编码：

可以重写PHP以导出JSON字符串而不是HTML：

<?php
require ("includes/conn.php");
$stmt=$conn->prepare("SELECT post_id, name, topic, post, time FROM posts ORDER BY time DESC");
$stmt->execute();
$result = $stmt->get_result();
$num_of_rows = $result->num_rows;
if ($num_of_rows > 0){
    $dataArray = [];
    while ($row = $result->fetch_assoc()){
        $data['post_id'] = $row['post_id'];
        $data['name'] = $row['name'];
        $data['topic'] = $row['topic'];
        $data['post'] = $row['post'];
        $data['time'] = date('d M, H:i a', strtotime($row['time']));
        $dataArray[] = $data;
    }
    echo json_encode($dataArray);
}
?>

并让javascript解析它（创建HTML字符串）：

$(document).on("click", "button#reply_button", function(e){
    e.preventDefault();
    var reply_button = $(this).closest('div');
    var reply_field = reply_button.next(".reply_txt");
    $(reply_button).fadeOut();
    $(reply_field).fadeIn();
});
function fetchPosts(){
    $.ajax({
        url: "fetch_posts.php",
        type: "POST",
        data: {},
        success: function(data){
            var jsonData = JSON.parse(data);
            // This will return an object like this:
            // {0: {post_id: '', name: '', ...}, 1: {post_id: '', name: '', ...}}
            // You can then use these objects in your javascript.
            $.each(data, function(post) {
                // FIRST check if the post_id is already in the posts:
                if ( !$("#posts_list").children("div[data-id=" + post.post_id + "]").exists() ) {
                    var thePostHTML = "<div data-id=\"" + post.post_id + "\">"; // etc...
                    $("#posts_list").append(thePostHTML);
                } 
            });
        $("#show_comments").html(data);
        fetchPosts();
        }
    });
}
setInterval(fetchPosts, 5000);

如何排除动态生成的页面中的按钮与其他内容刷新

1 个答案: