jQuery AJAX更新小部件在頁面加載時

Question

我想從數據庫中檢索設備的數量（通過對行進行計數），並在頁面加載時將其以更新后的值顯示在小部件中。

這是我的代碼：

        <div class="col-lg-3 col-sm-6">
            <div class="widget-panel widget-style-2 white-bg">
                <i class="ion-eye text-pink"></i> 
                <h2 class="m-0 counter"><span id="server_count">100</span></h2>
                <div>Servers</div>
            </div>
        </div>

...

    $(function (){

        $.ajax({

            type: 'POST',
            url: 'dashboard/analytics/server_count',
            success: function(result) {
                //alert(result);
                $('#server_count').html(result);
                },
            error: function() {
                alert("problem");
                }

        });

    });

警報在成功函數中顯示正確的值，但是在呈現頁面時更新div時遇到問題； 也就是說，它仍顯示默認靜態值（100）。

關於我所缺少的任何想法嗎？ 我應該如何寫，以便在加載頁面時及時從數據庫提取的動態值始終覆蓋默認值？ 謝謝！

Answer 1

確保函數在$( document ).ready(function() }); 這樣的事情。

$( document ).ready(function() {
     $(function (){
        $.ajax({
            type: 'POST',
            url: 'dashboard/analytics/server_count',
            success: function(result) {
                //alert(result);
                $('#server_count').html(result);
                },
            error: function() {
                alert("problem");
                }
        });
    });
});

Answer 2

發現問題是計數器插件，由h2選擇器上的“ counter”類調用。 尚不確定為什么計數動畫會阻止顯示Ajax結果，但是在刪除類后，值將按預期更新。