Question

我目前有以下功能，当页面刷新时更新div中的数据，这样可以正常工作但是我想编辑功能，使其不断更新，每2秒说一次，而不必刷新页面。我该怎么做呢？

<script>
    $(document).ready(function ajaxLoop() {
        //-----------------------------------------------------------------------
        // Send a http request with AJAX Jquery
        //-----------------------------------------------------------------------
        $.ajax({
            url: 'getOrderStatus.php', // Url of Php file to run sql         
            data: "",
            dataType: 'json', //data format      
            success: function ajaxLoop(data) //on reciept of reply
                {
                    var OrdersSubmitted = data[0].SUBMITTED; //get Orders Submitted Count
                    var OrdersFulfilled = data[0].FULFILLED; //get Orders Fulfilled count
                    //--------------------------------------------------------------------
                    // 3) Update html content
                    //--------------------------------------------------------------------
                    $('#OrdersSubmitted').html("SUBMITTED:" + OrdersSubmitted);
                    $('#OrdersFulfilled').html("FULFILLED:" + OrdersFulfilled); //Set output html divs
                }
        });
    });
</script>

Answer 1

您可以链接setTimeout来实现此目的：

$(document).ready(function() {
    function updateOrders() {
        $.ajax({                                      
            url: 'getOrderStatus.php',                                  
            dataType: 'json',
            success: function ajaxLoop(data) {
                var OrdersSubmitted = data[0].SUBMITTED;
                var OrdersFulfilled = data[0].FULFILLED;
                $('#OrdersSubmitted').html("SUBMITTED:"+ OrdersSubmitted);
                $('#OrdersFulfilled').html("FULFILLED:"+ OrdersFulfilled);

                setTimeout(updateOrders, 2000);
            } 
        });
    });

替代方案是setInterval()，但是如果请求减慢，则可能导致呼叫排队，最终会导致内存问题。

Answer 2

您需要添加重复事件来调用updateOrders函数。像：

function startUpdateOrdersTimes() {
    setInterval(function() {
        updateOrders();
    }, 2000);
    //Call now (otherwise waits for first call)
    updateOrders();
}

Answer 3

使用“window.setInterval”（https://developer.mozilla.org/en/docs/Web/API/window.setInterval）可以按指定的时间间隔重复执行一个函数。

function SomeFunction()
{
    $.ajax({...});
}

window.setInterval(SomeFunction,2000);

这将每2秒执行一次SomeFunction

希望这有帮助

Answer 4

timerupdateorders = setInterval(function() {
    ajaxLoop();
}, 2000);

您可以使用

clearInterval(timerupdateorders);

结束计时器

ajax jquery更新页面没有刷新

4 个答案: