每秒执行一次 Ajax 请求 [重复]

Question

我对 php 文件进行了 ajax 调用。我正在收到结果。现在我正在调查是否可以让 ajax 请求每 1 秒自动执行一次。我将结果发布到名为hidden 的输入字段中。如何每三秒执行一次 ajax 调用而不必调用该函数？

    $.ajax({
            type: 'POST',
            url: 'increment.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                    $('#hidden').val(data);// first set the value     

            }
    });

Answer 1

您可以通过一系列重复的setTimeout 调用来做到这一点。 （不要将setInterval 与ajax 调用一起使用，您很快就会陷入混乱；setInterval 将触发下一个 ajax 调用，即使前一个调用尚未完成.)

使用setTimeout 安排第一次通话，然后在完成后安排下一次通话，等等：

var interval = 1000;  // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
    $.ajax({
            type: 'POST',
            url: 'increment.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                    $('#hidden').val(data);// first set the value     
            },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}
setTimeout(doAjax, interval);

请注意，我使用complete，而不是success 来安排下一次通话，因此中断（您的网络连接暂时中断等）不会终止进程。

Answer 2

您可能要考虑的是Server Sent Events（SSE）

这是一种 HTML5 技术，Javascript 将“long-poll”服务器端点（您的 PHP 文件）以查看是否发生了任何更改。长轮询基本上是 JS（我不确定它是使用 Ajax 还是其他技术）每秒向端点发送一个请求的地方

你可以这样试试：

#/your_js
var evtSource = new EventSource("increment.php");
evtSource.onmessage = function(e) {
    $('#hidden').val(e.data);
}

要发送数据，您可以进行 ajax 调用，它将更新的 JSON 对象发送到服务器，就像您所做的那样：

  $(document).on("click", ".your_object", function(data) {
     $.ajax({
                type: 'POST',
                url: 'increment.php',
                data: $(this).serialize(),
                dataType: 'json'
        });
   });

这只会在您执行事件时打开 Ajax 请求，并且您的应用将每秒“侦听”响应。如您所知，Ajax 长轮询是超级资源密集型的，因此如果您想要真正的“实时”技术，最好查看 web-socket 的东西，但无论哪种方式，这将是一个更高效的系统不仅仅是使用普通的 ajax 来处理所有事情

这里需要注意的是 - 您必须更改您的 increment.php 以处理不同的响应类型

Answer 3

可以，使用 setInterval

1) 将 ajax 保存在函数中。

function fun() {
$.ajax({
            type: 'POST',
            url: 'increment.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                    $('#hidden').val(data);// first set the value     

            }
    });
}

2) 现在使用setInterval，可以每秒执行一次。

var interval = setInterval(fun, 1000);

3) 暂停/清除使用clearInterval

clearInterval(interval);

4) 正如其他人指出的那样，将setInterval 用于 ajax 是不明智的，因此请尝试使用

var interval;
function callAjax() {
  $.ajax({
                type: 'POST',
                url: 'increment.php',
                data: $(this).serialize(),
                dataType: 'json',
                success: function (data) {
                        $('#hidden').val(data);// first set the value 
                        interval = setTimeout(callAjax, 1000);   
                }
        });
}
callAjax();
//clearTimeout(interval);