javascript - 滚动加载更多 SQL 限制

Question

所以我已经布置并制作了这个网站，但现在我需要在滚动条上加载更多结果。这已被问到这里一百万次，但我想知道是否有一种简单的方法可以适合我的构建。理想情况下，我想做一些有限制的事情，但我所看到的一切都是关于拥有一个完全独立的页面。

页面示例-

$sql = "SELECT * FROM `Products` ORDER BY id LIMIT 0,4 ";

echo    "<div class=\"full_container\">";
echo        "<div class=\"full\">";

if ($result = mysqli_query($con, $sql)) {

while ($row = mysqli_fetch_assoc($result)) {

echo            "<div class=\"item_frame\">";
echo                "<div class=\"item\">";
echo                    "<h5>".$row["Name"]."</h5>";
echo                "</div>"; #Item End#
echo            "</div>"; #Item_Frame End#

JS 例子-

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

///Where I would have the limit fix

}
});

这是否能够轻松切换为能够在滚动上加载更多内容，还是我必须使用第二个 php 页面才能使用 ajax？

Answer 1

要获得更多信息，您可能必须通过 ajax 进行调用，然后在返回数据后使用 javascript 呈现新图像。您可以像对待常规分页一样对待它，只需记住您得到了多少结果并将其输入您的限制，例如

(function () {
  var page = 2,
      uri = 'moreImages.php';

  $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

      $.get (uri, {page: page}, function (data) {
        page ++;
        $('#container').append (data);
      });

    }
  });
}) ();

然后在您的 PHP 页面中，您只需要根据您的分页规则计算出偏移量

$page = (int) @$_GET['page'] ?: 1;

$numItems = 4;
$start = ($page - 1) * $numItems;

$sql = "SELECT * FROM `Products` ORDER BY id LIMIT {$start}, {$numItems}";

差点忘了:在他们到达页面底部之前发送请求可能也是值得的，以加快速度。请务必在您的代码中设置一个标志，以标记您正在等待信息，并且仅在信息明确时才请求更多信息，否则您将在滚动时不断发送请求。