>source

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
        }
      }
    });
    
    

관련 자료

  • 이전 sql server - 하위 집합이있는 상위 집합 테이블 조인
  • 다음 Excel VBA에서 루프를 사용하여 명명 된 범위를 만드는 방법은 무엇입니까?