php - 通过ajax/jquery调用在页面滚动上加载MySQL数据不会带来正确的数据

Question

我试图通过 ajax/jquery 调用在页面滚动上加载 mysql 数据库数据，但似乎没有出现正确的数据。实际上，已经获取并显示了重复的数据。根据我的说法，ajax.php(负责处理ajax请求的文件-服务器端文件)没有任何问题；在页面滚动事件上发送 ajax 请求的唯一问题是当满足特定条件时，id 会在窗口(页面)滚动时传递。下面是我的代码 -

JavaScript

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height())
        {
            var id = $(".item:last").attr("id");
            //alert(id);
            if(id > 1)
            {
                $('#load_more').show();
                $.ajax({
                    type: "POST",
                    data: "id="+id,
                    url: "ajax.php",
                    success: function(html){
                        if(html)
                        {
                            $("#postswrapper").append(html);
                            $('#load_more').hide();
                        }
                    }
                });
            }
            else
            {
                $('#load_more').html('No more posts to show.');
            }
        }
    });
});
</script>

CSS

#wrapper
{
    width:600px;
    margin:25px auto;
}

.item
{
    border-bottom:1px dotted #555555;
    padding:10px 5px;
    font-size: 16px;
}

HTML 和 PHP

<div id="wrapper">
    <div id="postswrapper">
        <?php
        include("includes/db-config.php");
        $sql = "SELECT * FROM `tb_comments` ORDER BY `comment_id` DESC LIMIT 10";
        $rs = mysql_query($sql);
        while($row = mysql_fetch_array($rs))
        {
            $comment_id = $row['comment_id'];
            $comment_text = $row['comment_text'];
        ?>
        <div class="item" id="<?php echo $comment_id; ?>">
        <p><span style="color:#FF0000;"><?php echo $comment_id; ?></span>
        <?php echo $comment_text; ?></p>
        </div>
        <?php
        }
        ?>
    </div>

  <div id="load_more" style="display:none;">
      <img src="images/ajax-loader.gif" width="128" height="15" border="0" alt="loading..." />
  </div>

</div>

ajax.php(服务器端ajax请求处理文件)

<?php
include("includes/db-config.php");
if(isset($_POST['id']))
{
    $id = $_POST['id'];
    $sql = "SELECT * FROM `tb_comments` WHERE `comment_id` < '$id' ORDER BY `comment_id` DESC LIMIT 10";
    $rs = mysql_query($sql);
    while($row = mysql_fetch_array($rs))
    {
        $comment_id = $row['comment_id'];
        $comment_text = $row['comment_text'];
?>
    <div class="item" id="<?php echo $comment_id; ?>">
    <p><span style="color:#FF0000;"><?php echo $comment_id; ?></span>
    <?php echo $comment_text; ?></p>
    </div>
<?php
    }
}
?>

输出 -

数据不应在 id=1 的评论文本后发布，该评论文本位于表中第一个，实际上是最后显示的数据项，但您可以在快照中清楚地看到数据再次从 id=6 开始获取并显示然后停在 id=1 处。如何解决这个问题？

Answer 1

确保一次只发送一个请求的一种方法是添加一个包含 ajax 请求/更新过程的当前状态的变量。在第一个请求完成处理之前不要调度第二个 ajax 请求，这一点非常重要。

$(document).ready(function(){
    $(window).scroll(function(){
        var loading = false;    // this variable will prevent duplicate requests
        if($(window).scrollTop() == $(document).height() - $(window).height())
        {
            if (loading) {  // if a request is in process, don't do anything
                return;
            }
            loading = true; // set the flag
            var id = $(".item:last").attr("id");
            //alert(id);
            if(id > 1)
            {
                $('#load_more').show();
                $.ajax({
                    type: "POST",
                    data: "id="+id,
                    url: "ajax.php",
                    success: function(html){
                        if(html)
                        {
                            $("#postswrapper").append(html);
                            $('#load_more').hide();
                        }
                        loading = false;  // clear the flag
                    }
                });
            }
            else
            {
                $('#load_more').html('No more posts to show.');
            }
        }
    });
});