带有间隔的简单ajax请求 - simple ajax request with interval

simple ajax request with interval

本文关键字：简单 ajax 请求 | 更新日期: 2023-09-27

我最近开始学习Ajax和jQuery。所以昨天我开始为一个formula编写一个简单的ajax请求，它将一个选择列表值发送到php脚本，并从数据库中读取一些内容。

到目前为止效果不错！但问题是，当我点击发送按钮时，它会在1秒后启动请求。我知道这和我的间歇期有关。当我点击发送按钮时，我会启动请求，它每秒钟都会请求，这样我就有机会自动刷新新的收入条目。

但我希望每秒钟都有一个间隔周期，但当我第一次按下按钮时，它应该立即加载，而不仅仅是1秒后。

这是我的代码：http://jsbin.com/qitojawuva/1/edit

$(document).ready(function () {
    var interval = 0;
    $("#form1").submit(function () {
        if (interval === 0) {
            interval = setInterval(function () {

                var url = "tbladen.php";
                var data = $("#form1").serialize();
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    success: function (data) {
                        $("#tbladen").html(data);
                    }
                });
            }, 1000);
        }
        return false;
    });

});

谢谢！

我可能是您想要的以下对象。

$(document).ready(function () {
    var isFirstTime = true;
    function sendForm() {
        var url = "tbladen.php";
        var data = $("#form1").serialize();
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            success: function (data) {
                $("#tbladen").html(data);
            }
        });
    }
    $("#form1").submit(function () {
        if (isFirstTime) {
            sendForm();
            isFirstTime = false;
        } else {
            setTimeout(function () {
                sendForm();
            }, 1000);
        }
        return false;
    });
});

因此，当回调完成时使用setTimeout，因为无论回调是否完成，setInterval都会继续运行。

$(function () {
    $("#form1").submit(postData);
    function postData() {
        var url = "tbladen.php",
            data = $("#form1").serialize();        
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            success: function (data) {
                $("#tbladen").html(data);
                setTimeout(postData, 1000);
            }
        });
        return false;
    }
});