如何使 ajax 加载更多内容，使用按钮分页工作

Question

我打算使用 ajax 加载更多按钮分页将更多视频加载到div/页面中，xhr 状态显示状态为 ok(200(，但没有加载视频内容。

videos.php：

<div id="videosline " class="col-md-3 content-grid ">
<?php //code to get first 3 videos working   ?>
</div>
<button id="loadvideos" class="btn ">Load More</button>

//ajax jquery 代码可在每次单击按钮时加载更多三个视频

$(document).ready(function(){
var videoscount = 3;
$("#loadvideos").click(function(){
videoscount = videoscount + 3;
$.ajax({
type:"GET",
url:"loadmore.php",
data:{
'videosnewcount':videoscount
},
sucess: function(data){
$('videosline').append(data);
}
});

loadmore.php：

<?php
include 'master.php';//some php config and db config
$videosnewcount = 3;
$condition =  [];
array_push($condition,['mediatype = ' => ['video/mp4','AND']]);

$data = find('files',$condition,["ORDER BY " => "id DESC","LIMIT" => $videosnewcount ]); //php function for mysql query

foreach($data as $video) { ?>
<?php if($video['mediatype'] == 'video/mp4') { ?>

<?php include('cards/video.php'); ?>

} 
}
?>

cards/video.php：

<?php if(explode('/',$video['mediatype'])[0] == 'video') { ?>
<a href="mediafile.php?id=<?= $video['id']?>&medianame=<?= $video['filename']?>"><div style=" height:;">
<video  controlslist="nodownload"  oncontextmenu="return false;" poster="member/<?= $video['poster'] ?>" style="height:250px; width:100%; " type="video/mp4" class="pr100"  src="member/<?= $video['path'] ?>" > </video</div></a><?php } ?>

Answer 1

我不知道这是否重要，但在loadmore.php中，您没有从 Ajax 调用中获取 GET 参数，所以我不知道您为什么要发送它。

重要的是，loadmore.php没有回显任何数据，因此您的 Ajax 响应应该是空的。另外，我看不到您向数据库发送任何查询。"从表中选择在哪里..."在哪里？