无限滚动：使用 Ajax 和 php 对帖子进行排序

Question

我正在尝试使用 ajax php 和 jquery 无限滚动我的页面。 我已经粘贴了 jquery 代码 doe 参考。我正在尝试使用 jquery 和 php 按顺序发布。我的 jquery 代码将 counta 发送到 php 脚本。 php 脚本然后根据它收到的数字返回结果。我正在尝试按顺序发布帖子，以免它们重复。当用户到达页面底部时，我会收到帖子。

也欢迎任何其他答案。但我只想使用jquery的核心含义，不包含任何外部库。

var counta = 0;
$(document).ready(function(){


    $(window).scroll(function() {

   if($(window).scrollTop() + $(window).height() > $(document).height() - 2000) {            
    //  console.log("Here");

    $.ajax({            
                            type: 'post',
                            url: 'extendost.php',               
                            data: '&articles='+counta,              
                            success: function (data) {                                  
                            alert(counta);
                            $("#morepost").append(data);                                                    
                            counta++;
                            },
                            error: function (data) {                            
                            alert(data);                                
                            },
          });

   }
}); 

Answer 1

这就是我会做的：

<div id="start">0</div>
<div class="post_content"></div>

$(window).data('ajaxready', true).scroll(function(e) {
    var postHeight = $('#post_content').height();
    if ($(window).data('ajaxready') == false) return;
        var start = parseInt($('#start').text());
        var limit = 30; // return 30 posts each
        if ($(window).scrollTop() >= postHeight - $(window).height() - 400) {
            var height = $(window).scrollTop();
            $(window).data('ajaxready', false);
            if (start > 0) {
                var new_start = start + limit;
                var dataString = {articles : start, limit : limit};
                $.ajax({
                    cache: false,
                    url: 'extendost.php',
                    type: 'POST',
                    data: dataString,
                    success: function(data) {
                        if ($.trim(data).indexOf('NO POST') > -1) {
                            /* stop infinite scroll when no more data */
                            $('#start').text(0);
                        } else {
                            $('#post_content').append(data);
                            $('#start').text(new_start);
                        }
                        $(window).data('ajaxready', true);
                    }
                });
            }
        }
    });

这样，您的#start 值将在滚动时发生变化，并为下一个滚动值做好准备

然后根据 $start (offset) 和 $limit 进行查询

$query = "SELECT * FROM articles LIMIT {$limit} OFFSET {$start}";
if (!$result = mysqli_query($con, $query) {
  echo 'NO POST';
} else {
  // fetch and echo your result;
}