使用php，數據源JSON在頁面滾動上加載更多數據

Question

我開發了一個交易和優惠券網站，我的數據源是JSON。 我的json文件很大，大約4MB。 我想顯示前30個數據，並在滾動加載后顯示30​​個數據。所以請告訴我如何使用JSON進行此工作。 這是我的代碼：

<?php $json = file_get_contents('offers.json');
$json_decode = json_decode($json,true);
foreach($json_decode as $data){
?>
<div class="ad-box">
<div class="ad-category"><?php echo $data['category'];?></div>
<div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl'];?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
<div class="ad-title"><a href="<?php echo $data['url'];?>" target="_blank"><?php echo $data['title'] . " : " . $data['description'];?></a></div>
<div class="ad-url"><a href="<?php echo $data['url'];?>" target="_blank">Goto Offer</a></div>

</div>
<?php }
?>

Answer 1

您的Json數組是未知的，但是：

主頁：

<div id="loadbox">

    <?php
    $json = file_get_contents('offers.json');
    $json_decode = json_decode($json, true);
    for ($i = 0; $i < 29; $i++):
        $data = $json_decode[$i];
        ?>
        <div class="ad-box">
            <div class="ad-category"><?php echo $data['category']; ?></div>
            <div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl']; ?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
            <div class="ad-title"><a href="<?php echo $data['url']; ?>" target="_blank"><?php echo $data['title'] . " : " . $data['description']; ?></a></div>
            <div class="ad-url"><a href="<?php echo $data['url']; ?>" target="_blank">Goto Offer</a></div>

        </div>
        <?php
    endfor;
    ?>

</div>

<script type="text/javascript">
    var last = 30;

    function getData(lst) {
        $.get("loader.php", {'last': lst}, function (data) {
            $("#loadbox").append(data);
            last += 30 ;
        });
    }
    $(function () {
        $(window).scroll(function () {
            buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
            if ($("html").prop('scrollHeight') - $("html").scrollTop() <= $("html").height() + buffer) {
                getDate(last);
            }
        });
    });
</script>

在主頁中，您將加載前30條記錄，並在滾動端加載活動的ajax。

當一個加載器請求ajax時：

<?php
$json = file_get_contents('offers.json');
$json_decode = json_decode($json, true);
$start = (int) $_GET['last'] ;
for ($i = $start ; $i < ($start+30) ; $i++):
    $data = $json_decode[$i];
    ?>
    <div class="ad-box">
        <div class="ad-category"><?php echo $data['category']; ?></div>
        <div class="ad-image"><img class="lazy" data-src="<?php echo $data['imageUrl']; ?>" src="" width="150" height="140" border="0" alt="lazy Image"/></div>
        <div class="ad-title"><a href="<?php echo $data['url']; ?>" target="_blank"><?php echo $data['title'] . " : " . $data['description']; ?></a></div>
        <div class="ad-url"><a href="<?php echo $data['url']; ?>" target="_blank">Goto Offer</a></div>

    </div>
    <?php
endfor;
?>