Question

我正在尝试建立一个系统，其中随着用户滚动，内容（帖子）将从MySQL自动获取。我尝试放置一个ajax代码，但显示某些错误。下面是完整的代码。

我的index.php代码：

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        var flag = 0;

        $.ajax({
            type: "GET",
            url: "get-data.php",
            data: {
                'offset': 0,
                'limit': 3
            },
            success: function(data){
                $('.thelisting').append(data);
                flag += 3;
            }
        });

        $(window).scroll(function() {

            if($(window).scrollTop() >= ($(document).height() - $(window).height())- 200) {

                $.ajax({
                    type: "GET",
                    url: "get-data.php",
                    data: {
                        'offset': flag,
                        'limit': 3
                },
                success: function(data){
                    $('.thelisting').append(data);
                    flag += 3;
                }
        });

            }
        });
    });

我的get-data.php代码

    if(isset($_GET['offset']) && isset($_GET['offset'])){

        $limit = $_GET['limit'];
        $offset = $_GET['offset'];

        require('connect.php');

        $data = mysqli_query($conn, "SELECT * FROM `posts` LIMIT {$limit} OFFSET {$offset}");
        while($row = mysqli_fetch_array($data)) {
            echo '<div class="blog-spot"><h1>'.$row['posttitle'].'</h1><p>'.$row['postdescription'].'</p><img src="uploads/'.$row['postimagelink'].'"/></div>';
        }

    }

我收到的错误是..

当我使用以下代码时：

        if($(window).scrollTop() >= ($(document).height() - $(window).height())- 200) {

帖子以以下格式加载：1、2、3、4、5、6、4、5、6、10、11、12、10、11、12、16、17 ... 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...等等。

因此，它不再加载7、8、9和13、14、15，而是重复前3个帖子。我也尝试过以下行，但存在相同问题：

            if($('body').height()-200 <= ($(window).height() + $(window).scrollTop())) {

当我使用不带-200的代码时，即：

        if($(window).scrollTop() >= $(document).height() - $(window).height()) {

在初始负载滞后/挂起后，我必须调整窗口大小以显示下一个连续的3个帖子，否则下一个3个帖子不出现，并且帖子中有图像时，滞后更为精确。虽然顺序是正确的。

我更喜欢第1点，因为页面的页脚高度很大。而且在第1点中没有滞后，它加载平稳，但是错过了3个备用帖子，而是重复了前3个帖子。

有人可以帮助我解决此问题，尤其是针对第1点。

谢谢

Ajax和Mysqli在滚动滞后/挂起或滚动重复时获取自动加载内容

0 个答案: