如何解決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