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＆amp; 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
    }
}
?>

输出

enter image description here

不应在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.');
            }
        }
    });
});

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

1 个答案: