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

Question

我正在尝试使用 ajax php 和 jquery 无限滚动我的页面。我已经粘贴了 jquery 代码 doe 参考。我正在尝试使用 jquery 和 php 按顺序获得 post。我的 jquery 代码将计数发送到 php 脚本。 php 脚本然后 returns 根据它收到的数字的结果。我正在尝试按顺序获取 post，这样它们就不会重复。当用户到达页面底部时，我得到 post。

任何其他答案也欢迎。但我只想使用 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;
}

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

Infinite scroll : Sequencing post with Ajax and php

php

ajax

jquery

infinite-scroll