加载以获取数据只是第一次起作用

Question

我正试图用jQuery.load从数据库加载更多数据，它运行得很好，但在第一次加载后，它会带来更多数据。

此外，为了带来第一个内容，这是在第一个页面加载时带来的，我使用了一个PHPforeach()循环，像这样作为一个基本示例：

<div class="grid-products">
<?php foreach($products as $product): ?>
<div class="grid-product">
<?php echo $product['name']; ?>
</div>
<?php endforeach; ?>
</div>

我正在尝试从我的数据库中滚动加载更多数据，这样用户就不必点击按钮。我正在根据这个问题的方法从我的数据库中加载信息，如下所示：

$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
//do an ajax call
}
});

但是，由于我不知道如何执行上面我发现的答案中提到的ajax调用，我决定使用jquery.load传递一些POST方法变量，在本例中为productNewCount。首先，我将其值设置为6，当用户到达页面底部时，我们将其值加上6，如下所示：

$(window).scroll(function() {
var productCount = 6;
if($(window).scrollTop() == $(document).height() - $(window).height()) {
productCount = productCount + 6;
$(".grid-products").load("load-products.php", {
productNewCount: productCount
});
}
});

这在第一次加载时非常有效，因此当执行此操作时，它会在<div class="grid-products">上加载load-products.php文件。这里，变量$connection正在调用我的函数来连接数据库，不要太重视它

这是load-products.php:

<?php 
$connection = connect();
$product_new_count = $_POST['productNewCount'];
$sentence = $connection->prepare("
SELECT * FROM all_products ORDER BY date DESC LIMIT $product_new_count
");
$sentence->execute();
$products = $sentence;
?>
<?php foreach($products as $product): ?>
<div class="grid-product">
<?php echo $product['name']; ?>
</div>
<?php endforeach; ?>

在这句话中，我们调用以使all_products表中的所有行通过其date列排序，并限制为仅使product_new_count所说的行(其值是我们在主文件中引入的productCountJS变量(在加载之前出现。

我确保仍然有行可供携带，所以第一次加载后没有显示其他行的原因并不是因为已经没有行了。此外，终端没有显示任何错误或警告，而且还有可用的空间进行滚动，因此可以调用该功能。

我可以通过这个.load方法带来更多数据吗？还是应该使用我找到的答案中提到的AJAX调用？如果是，怎么办？

Answer 1

每次滚动时，productCount都设置为6，因此所有加载请求都是相同的
您可以在事件处理程序之外定义productCount，以增加每次加载的元素数量。

var productCount = 6;
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
productCount = productCount + 6;
$(".grid-products").load("load-products.php", {
productNewCount: productCount
});
}
});

Answer 2

如果您试图添加到现有内容中(而不是全部替换(，请使用$.post而不是load()并附加结果。

load()替换匹配选择器中已经存在的内容

$.post("load-products.php", {productNewCount: productCount}, function(html){
$(".grid-products").append(html)
})