bugfix> php > 投稿

Ajax無限スクロールを使用してデータベースからより多くのアイテムをロードするつもりです。 id = resultsを指定してdivの一番下までスクロールすると、ajaxは最初は正常に機能し、データベースの行21〜31を追加します。注:オフセット= 20および制限= 10。コールバック後、オフセットは30(つまり、オフセット+ = 10)に変更されるように設定されます。 ただし、さらにスクロールしても、オフセット値は変更されませんでした。同じ行21〜31が何度も何度も何度も返されました。 どうすればこれを解決できますか?

index.php

<div class="row" id="result">
<?php 
$offset=0;
$limit = 20;
$query =$con->prepare("SELECT xxx FROM yyy LIMIT ? OFFSET ?");
$query->bind_param('ii', $limit, $offset);
$query->execute();
$result = $query->get_result();
while($row=$result->fetch_assoc()){
?>
    <div class="col-md-3 mb-4">  
        <div class="card-deck h-100">      
            <div class="card border-secondary">
                <img src="<?php echo $row['ppp']; ?>" class="card-img-top img-fluid">
                <div class="card-body">
                    <h6 class="font-weight-bold text-secondary text-center mt-1"><?= $row['mmm']; ?></h6>
                    <hr class="mt-1 mb-1">
                    <h6 class="card-title text-danger">NGN<?= number_format($row['nnn']); ?> /-
                    </h6>
                    <hr class="mt-1 mb-1">
                    <small class="text-secondary">Fabric Used: <?php echo $row['fff'];?>
                        <br>                                                
                    </small>
                            
                    <a href="product-details.php?ProductId=<?= $row['iii'] ?>" class="btn btn-info btn-block addItemBtn"><i class="fas fa-cart-plus"></i> Order Now</a>
                </div>
            </div>
        </div>
    </div>
<?php   
} // endwhile
?>
</div>
<div class="p-3 text-center" id="loading" style="display: block" >
    <button class="btn btn-danger" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
          Loading more items...
    </button>
</div>
<script type="text/javascript">
    let in_ajax = false;
    var flag = 20;
$(window).scroll(function() { //scroll function
  if (!in_ajax) {
    if ($(window).scrollTop() >= $('#result').height() - $(window).height()) {
      in_ajax = true;
      $.ajax({
        type: 'POST',
        url: 'results.php', //get result page
        data: {
          'offset': flag,
          'limit': 10
        },
        beforeSend: function() {
            $("#loading").show();
        },
        success: function(data) {
          $('#result').append(data);
          flag += 10; //add 10 to last offset value after callback
          in_ajax = false;
        },
        complete: function() {
            $("#loading").hide();
        }
      }); //close ajax
    }
  }
});
</script>

results.php

<?php 
if(isset($_POST['offset']) && isset($_POST['limit'])){
    $offset = $_POST['offset'];
    $limit = $_POST['limit'];
    if($sql = "SELECT xxx FROM yyy LIMIT ? OFFSET ?"){
        $query = $con->prepare($sql);
        $query->bind_param('ii', $limit, $offset);
        $query->execute();
        $result = $query->get_result();
        while($row=$result->fetch_assoc()){
?>
            <div class="col-md-3 mb-4">         
                <div class="card-deck h-100">      
                    <div class="card border-secondary">
                       <img src="<?= $row["ppp"] ?>" class="card-img-top img-fluid">
                        <div class="card-body">
                            <h6 class="font-weight-bold text-secondary text-center mt-1"><?= $row["mmm"] ?></h6>
                            <hr class="mt-1 mb-1">
                            <h6 class="card-title text-danger">NGN <?= number_format($row["nnn"]) ?>
                            </h6>
                            <hr class="mt-1 mb-1">
                            <small class="text-secondary">Fabric Used: <?= $row["fff"] ?></small>
                            <br>
                            <a href="product-details.php?ProductId=<?= $row['iii'] ?>" class="btn btn-info btn-block addItemBtn"><i class="fas fa-cart-plus"></i> Order Now</a>
                        </div>
                    </div>
                </div>
            </div>
<?php
        } // endwhile
    }//end if query successfull
    else{
        echo "Query Failed";
    }
}//end isset 
?>

回答 1 件
  • 変数を使用して、AJAXリクエストの最中であるかどうかを検出し、重複を送信しないようにします。

    let in_ajax = false;
    $(window).scroll(function() { //scroll function
      if (!in_ajax) {
        if ($(window).scrollTop() >= $('#result').height() - $(window).height()) {
          in_ajax = true;
          $.ajax({
            type: 'POST',
            url: 'results.php', //get result page
            data: {
              'offset': flag,
              'limit': 10
            },
            success: function(data) {
              $('#result').append(data);
              flag += 10; //add 10 to last offset value after callback
              in_ajax = false;
            }
          }); //close ajax
        }
      }
    });
    
    

あなたの答え