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（偏移量）和$ 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测序

1 个答案: