如何讓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響應應該為空。 另外，我看不到您向數據庫發送了任何查詢。 “從WHERE表中選擇...”在哪里？

Answer 2

您必須傳遞偏移量以跳過已加載的數據。

 <?php
           include 'master.php';//some php config and db config
           $videosnewcount = $_GET["videosnewcount"];
            $condition =  [];

            array_push($condition,['mediatype = ' => ['video/mp4','AND']]);



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


            foreach($data as $video) { ?>

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


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



                } 
            }
            ?>

在JS文件中

var videoscount = 0;


   $("#loadvideos").click(function(){

    $.ajax({
         type:"GET",
         url:"loadmore.php",
         data:{

            'videosnewcount':videoscount
         },
         sucess: function(data){
            videoscount = videoscount + data.length;
            $('videosline').append(data);
         }

    });

Answer 3

您需要在“成功”上再添加1個“ c”

$.ajax({
    type:"GET",
    url:"loadmore.php",
    data:{'videosnewcount': videoscount},
    success: function(data){
        $('videosline').append(data);
    }
});