如何解決jQuery ajax加載更多問題？

Question

我正在使用jQuery ajax在我的應用程序中加載更多功能。這是我的Ajax代碼：

$(document).ready(function() { 
    $(document).on('click','.show_more', function(e) { 
       e.preventDefault(); 
       var ID = $(this).attr('id'); 
       //$('.show_more').hide(); 
       //$('.loding').show(); 
       alert(ID) 
       $.ajax({ 
        type:'POST', 
        url:'ajax_load_more.php', 
        data:{"id" : ID}, 
        success:function(html){ 
         $('#show_more_main'+ ID).remove(); 
         $('.showmorediv').append(html); 
        } 
       }); 
       e.preventDefault(); 
      }); 

爲了測試我把警報顯示ID它完美的工作。但ajax代碼不工作。沒有錯誤並且沒有找到控制檯日誌。 我仔細檢查ajax_load_more.php頁面它根據提醒的ID完美工作。

這裏是我的PHP代碼

if(isset($_POST["id"]) && !empty($_POST["id"])) 
{ 

    $queryAll = $conn->query("SELECT COUNT(*) as num_rows FROM product WHERE id < ".$_POST['id']." ORDER BY id DESC"); 
    $row = $queryAll->fetch_array(); 
    $allRows = $row['num_rows']; 
    $showLimit = 3; 

    $query2 = $conn->query("SELECT * FROM product WHERE id < ".$_POST['id']." ORDER BY id DESC LIMIT ".$showLimit); 
    $rowCount = $query2->num_rows; 
    if($rowCount > 0){ 
     while($row_p = $query2->fetch_array()){ 
      $loadmoreid = $row_p["id"]; ?> 
      <div class="col-md-4 col-sm-6 col-xs-12 mar-bot showmorediv"> 
      <!-- single-product-start --> 
      <div class="single-product"> 
       <div class="single-product-img"> 
        <a href="product-details/<?=preg_replace('!\s+!', '-',preg_replace("/[^A-Za-z0-9 \s+]/",' ',$row_p[4]));?>-<?=$row_p[0];?>"> 
         <img src="<?=$row_p[13];?>" alt="<?=$row_p[3];?>"/> 
        </a> 
        <span class="sale-box"> 
         <span class="sale">-<?php echo $offprice=round((($row_p[5]-$row_p[6])*100)/$row_p[5]); ?>%</span> 
        </span>            
       </div> 
       <div class="single-product-content"> 
        <div class="product-title"> 
         <h5> 
          <a href="product-details/<?=preg_replace('!\s+!', '-',preg_replace("/[^A-Za-z0-9 \s+]/",' ',$row_p[4]));?>-<?=$row_p[0];?>"><?=$row_p[3];?></a> 
         </h5> 
        </div>            
        <div class="price-box"> 
         <span class="price">Rs.<?=$row_p[6];?></span> 
         <span class="old-price">Rs.<?=$row_p[5];?></span> 
        </div> 
        <div class="product-action"> 
         <button class="btn btn-default add-cart" data-id="<?=$row_p[0];?>" data-name="<?=$row_p[3];?>" data-summary="<?=$row_p[3];?>" data-price="<?=$row_p[6];?>" data-quantity="1" data-image="<?=$row_p[13];?>">Add to cart</button>   
        </div> 
       </div> 
      </div> 
      </div> 
      <?php 
      } 
      if($allRows > $showLimit) 
      { 
      ?> 
       <div class="show_more_main" id="show_more_main<?php echo $loadmoreid; ?>"> 
        <span id="<?php echo $loadmoreid; ?>" class="show_more btn btn-primary" title="Load more posts btn btn-primary">More</span> 
        <span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span> 
       </div> 
     <?php } 
     } 
    } 
?> 

Answer 1

您可以通過使用jquery ajax error function像這樣

https://stackoverflow.com/a/8918298/7419418