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;
?>

在页面滚动上加载更多数据使用php，数据源JSON

1 个答案: