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

Posted 2023-02-24

【中文标题】当页面到达底部时，ajax 和 php 从 mysql 加载更多内容

【英文标题】：ajax and php to load more content from mysql when page gets to bottom

【发布时间】：2015-08-23 05:26:07

【问题描述】：

我已经在这个网站上看到了这个问题的一些答案，但我仍然无法按照我想要的 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
                                    
                                );
                            
                        );

【问题讨论】：

是的，这就是我真正遇到问题的地方，没有太多经验，这对我来说是一个边走边学的项目

向我们展示您的 AJAX（甚至可能是您的 PHP 代码）。我们可以从那里开始工作。

显示您尝试过的代码，即使它不起作用。人们更愿意通过发现/修复错误来提供帮助，而不是仅仅为您完成工作。

【参考方案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
                
            );
        
    );
);

【参考方案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,
    ))

【参考方案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");

【讨论】：

当您在 Stack Overflow 上回答问题时，请附上您的回答描述，而不仅仅是一行代码。另外，因为这个问题已经回答过了，所以这个答案是没有必要的。