当页面到达底部时，ajax 和 php 从 mysql 加载更多内容

Question

我已经在这个网站上看到了这个问题的一些答案，但我仍然无法按照我想要的 2 天来实施它。我是一个初学者，所以一个非常清楚的解释会很有帮助，

我有一些数据的 mysql 数据库，我想从一个表中读取并一次显示 30 行，当用户滚动到页面末尾时，我想加载另外 30 行（我已经能够完成前 30 个，但加载其余的对我来说是一个挑战）。

我已经有了这个：

$(document).ready(function(){   
       $(window).scroll(function() {
           if($(window).scrollTop() == $(document).height() -$(window).height()) {
               //ive tried all sorts of things here it just doesnt work
           }
});

加载下一个内容的 php 文件的示例也会有所帮助，

我正在使用 php 和 mysqli

非常感谢。

所以这是我的 loadmore.php，它的功能，没有设置输出样式：

<?php 
require_once 'functions.php'; //my databse connection is in this file

//i created a function queryMysql($query) in functions.php, thats what is used here 
$result = queryMysql("SELECT * FROM articles WHERE live='1' ORDER BY created DESC LIMIT $start, 30");
$num = $result->num_rows;

for ($j = 0 ; $j < $num ; ++$j){
    $row = $result->fetch_array(MYSQLI_ASSOC);
    $title = $row['title'];
    $subtitle = $row['subtitle'];
    echo "$title<br />$subtitle";                                                    
}?>

对于 ajax，我将其更改为我在这里得到的第一个答案，但我所有的尝试都是这样的：

 $(window).scroll(function() {
                            if($(window).scrollTop() == $(document).height() - $(window).height()) {
                                $.ajax({
                                    type: method,
                                    data: {}, //Your data
                                    url: 'loadmore.php',
                                    async: true,
                                    success: function (data, textStatus, jqXHR) {
                                        $('#article-inro-hold').append(data);
                                    },
                                    error: function (jqXHR) {
                                        //Error handler
                                    }
                                });
                            }
                        });

Answer 1

尝试实现jquery ajax，大致如下：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $.ajax({
                type: method,
                data: {}, //Your data
                url: 'your/url/to/get/more/content/from',
                async: true,
                success: function (data, textStatus, jqXHR) {
                    $('#myDiv').append(data);
                },
                error: function (jqXHR) {
                    //Error handler
                }
            });
        }
    });
});

Answer 2

您必须每次进行 ajax 调用，当您滚动量上升时，更接近文档高度。除了你还必须管理你的偏移量，否则你会得到重复的记录（你可以使用隐藏字段），并在你的 ajax 调用中每次传递它。

<div id="ajax-response"></div>
<input type="hidden" value="0" id="offset" />

<script>
$(document).ready(function(){   
    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {

           $.ajax({
               url: 'requesthandler.php',
               type: 'post',
               data: {
                    task: 'show-more',
                    offset: document.getElementById('offset').value
               },
               success: function(response){
                    jsonObj = $.parseJSON(response);
                    $('#ajax-response').append(jsonObj.html);
                    document.getElementById('offset').value = jsonObj.offset;
               }
           })
        }
    });
});

requesthandler.php 看起来像：

if($_POST['task'] == 'show-more'){
    $offset = (int) $offset;
    $sql = "SELECT * FROM table limit $offset, 10";
    $data = '';
    foreach ($conn->query($sql) as $row) {
        $data .= "<div>$row['column']</div>";
    }
    echo json_encode(array(
        'offset' => ($offset + 10),
        'html' => $data,
    ))
}

Answer 3

$query = $db->query("SELECT * FROM bags ORDER BY id DESC LIMIT 7");

我们可以在这里使用$_POST 来获取只需要的信息吗？

$limit=($_POST["bag"]);
$query = $db->query("SELECT * FROM bags WHERE id = '.$limit.' ORDER BY id DESC LIMIT 7");