在不刷新页面的情况下从数据库中获取信息

Question

我正在开发一个程序。 在商店部分，我们为用户展示产品我希望您在用户浏览网站时看到该产品，并且在不刷新页面的情况下将新产品添加到网站

我已经用 setInterval 方法每隔几秒刷新一次商店部分的内容，但它对我不起作用

<div id="parnet" class="row">
        <p id="players">
        <?php foreach ($players as $player) { ?>
        <div  class="col-lg-6 col-xl-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="row m-b-30">
                        <div class="col-md-5 col-xxl-6">
                            <div class="new-arrival-product mb-4 mb-xxl-4 mb-md-0">
                                <div class="new-arrivals-img-contnent">
                                    <img class="img-fluid" src="<?=baseUrl()?>/upload/images/players/<?=$player['image']?>" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 col-xxl-6">
                            <div class="new-arrival-content position-relative">
                                <h4><?=$player['playerName']?></h4>
                                    <p>Buy Now Price <span class="item text-success"><?=$player['buyPrice']?></span></p>
                                    <p>Market Price: <span class="item text-success"><?=$player['marketPrice']?></span> </p>
                                    <p>Price In Dollar: <span class="item text-success"><?=$player['price']?></span></p>
                            </div>
                            <button type="button" class="btn btn-rounded btn-primary btn-sm"><span class="btn-icon-left text-primary"><i class="fa fa-shopping-cart"></i>
                                    </span>Buy</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <?php } } ?>
        </p>
</div>


<script>
    setInterval(function() {
        $(".parent").load(document.URL+ ' #players');
    }, 1000); 
</script>

Answer 1

这是一个示例代码：

<script>
    $(document).ready(function(){
        setInterval(function() {
            fetchNewProducts();
        }, 1000); 
    });
    function fetchNewProducts(){
        let get = $.get('<Your URL to fetch new products>', {
            lastProdId: "<Insert_Max_Fetched_ProdId>",
        })
        get.done(response => {
            response = JSON.parse(response);
            if (!response.error) {
                $('#targetDiv').append(response.data)
            } else {
                alert(response.message);
            }
        })
    }
</script>

请注意，在 PHP URL 中获取数据时，它应该返回完整的 html 产品，这些产品将简单地附加到已呈现的列表中。 controller 逻辑应该是这样的，如果没有找到数据，则response.data只是一个空字符串。