如何在没有更多数据时停止无限循环(分页)

Question

我需要这个jquery脚本的帮助，我在我的分页中使用这个脚本来创建延迟加载/无限滚动。

加载正在工作，但是，每当加载新数据时，它都会显示 1，最后如果没有更多数据，它会无限加载 1 1 1 1。我需要帮助来摆脱 1，并在没有来自 db 的数据时停止加载。

我的脚本：

<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});

function loadMoreData(last_id){
$.ajax(
{
url: 'LoadingData1.php?last_id=' + last_id,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#load-data").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('There's an issue with Loading...');
});
}
</script>

我的加载数据1.php代码

<?php
$newid = $_GET['last_id'];
$not = $db -> prepare('SELECT * FROM orderinhomeonlinecall WHERE id < ? AND cuid=? ORDER BY id DESC LIMIT 10');
$not -> bind_param('ii', $newid, $uid);
$not -> execute();
$result = $not->get_result();       
$json = include('data1.php');
echo json_encode($json);
?>

我的数据1.php代码：

<?php while ($row = $result->fetch_array()) {
$id1 = $row['id'];
$orderId1 = $row['orderId'];
$serviceName1 = $row['serviceName'];
$totalprice1 = $row['totalprice'];
$orderStatus1 = $row['orderStatus'];
?>

<a href="booktype/orderdetails.php?orderId=<?php echo $orderId1; ?>" class="post-id" id="<?php echo $id1 ?>">
<?php switch ($orderStatus1) {
case 1: ?>
<i class="fa fa-circle color-gray2-dark"></i>
<span><?php echo $serviceName1; ?></span>
<strong><?php echo $ctype1; ?></strong>
<em class="bg-gray2-light font-11">&#8358;<?php echo $totalprice1; ?></em>
<?php break;

case 2:
case 3:
case 4:
case 5:
?>
<i class="fa fa-circle color-blue2-dark"></i>
<span><?php echo $serviceName1; ?></span>
<strong><?php echo $ctype1; ?></strong>
<em class="bg-blue2-light font-11">&#8358;<?php echo $totalprice1; ?></em>
<?php break;
case 6:
?>
<i class="fa fa-circle color-green2-dark"></i>
<span><?php echo $serviceName1; ?></span>
<strong><?php echo $ctype1; ?></strong>
<em class="bg-green2-light font-11">&#8358;<?php echo $totalprice1; ?></em>
<?php break;
case 10:
case 11:
?>
<i class="fa fa-circle color-red2-dark"></i>
<span><?php echo $serviceName1; ?></span>
<strong><?php echo $ctype1; ?></strong>
<em class="bg-red2-light font-11">&#8358;<?php echo $totalprice1; ?></em>
<?php 
break;
} ?>
<i class="fa fa-angle-right"></i>
</a>
<?php 
}
?>

任何帮助将不胜感激。

Answer 1

正如我在评论中所说，json代码与你的php无关，

在 while 循环中，您需要向 AJAX 控件显示类或 ID。

最终解决方案应如下所示：

您的 php 代码 ：

$newid = $_GET['last_id'];
$not = $db -> prepare('SELECT * FROM orderinhomeonlinecall WHERE id < ? AND cuid=? ORDER BY id DESC LIMIT 10');
$not -> bind_param('ii', $newid, $uid);
$not -> execute();
$result = $not->get_result();       
include('data1.php');

您的同时循环：

<?php 
while ($row = $result->fetch_array()) {
$id1 = $row['id'];
$orderId1 = $row['orderId'];
$serviceName1 = $row['serviceName'];
$totalprice1 = $row['totalprice'];
$orderStatus1 = $row['orderStatus'];
?>

您的 html 在循环中：

<div class="post-id" id="<?php echo $id1; ?>">
/*Do your other things in here */
</div>
<?php } ?>

和 ajax 代码：

loaded = true; //Initialize
$(window).scroll(function() {
if(($(window).scrollTop() == $(document).height() - $(window).height()) && loaded) { //Add in condition
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id){
loaded = false; //False at start ajax call
$.ajax({
url: '/loadMoreData1.php?last_id=' + last_id,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data);
loaded  = true; //true to load data
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response...');
loaded  = true;
});
}

这里的例子 https://www.itsolutionstuff.com/post/php-infinite-scroll-pagination-using-jquery-ajax-exampleexample.html