javascript – jQuery：仅当页面上当前没有运行AJAX时才提交表单

当城市输入字段模糊时,我通过ajax请求得到somnething,并将其设置为与城市字段所在的相同形式的隐藏字段的值.

$('input#city').on('blur', function() {
    $.ajax({
        url: 'get/something?param=val',
        success: function(response) {
            $('input:hidden[name="something"]').val(response);
        }
    });
});

如果用户在模糊城市字段后立即提交表单,有时由于延迟,则不会填充隐藏字段,因为另一端的sql花费的时间太长.

这两个字段所在的表单也是通过ajax提交的：

$('form#find-users').on('submit', function() {
    if(NO_AJAX_CURRENTLY_RUNNING_ON_PAGE) {
        // do stuff
    }
});

如何检测页面上是否没有运行ajax？这将确保完成城市ajax并在处理表单之前填充隐藏字段.

编辑

实际上它不会,它只会阻止提交表单.但是,如果我可以检测到,那么我可以使用setInterval并继续尝试运行该代码,直到它运行,因为ajax已完成.理想情况下,jQuery中会有一些东西等待其他ajax完成然后提交.

解决方法:

使用jQuery的Ajax Events.只要使用jQuery生成所有Ajax调用,您就可以知道是否有任何Ajax调用未完成.

$(document).ready(function() {
    var ajaxBusy = false;

    $(document).ajaxStart( function() { 
        ajaxBusy = true; 
    }).ajaxStop( function() {
        ajaxBusy = false;
    });
});

编辑：

所以这回答了你直接的问题：“我如何知道是否有任何Ajax调用正在运行.”

或者,您可以在运行模糊处理程序时禁用表单的提交按钮,然后在完成后重新启用它.

$('input#city').on('blur', function() {
    var submit = $(this).closest('form').find(':submit:enabled');
    submit.prop('disabled', true);
    $.ajax('get/something?param=val').done(function(response) {
        $('input:hidden[name="something"]').val(response);
    }).always(function() {
        submit.prop('disabled', false);
    });
});

编辑2：

所以现在我们就要延迟表单提交,直到所有当前的Ajax调用完成.我们让人们点击提交按钮,但如果有待处理的Ajax调用,我们就不会马上做任何事情.

我们可以使用Deferred对象来帮助我们.

$(document).ready(function() {
    var ajaxDefer = $.Deferred().resolve();

    $(document).ajaxStart( function() { 
        ajaxDefer = $.Deferred(); 
    }).ajaxStop( function() {
        ajaxDefer.resolve();
    });

    $('form#find-users').on('submit', function() {
        ajaxDefer.always(function() {
            // Code here will always be executed as soon as there are no 
            // Ajax calls running.
            // this points to the deferred object (ajaxDefer), so use the closure
            // to carry over any variables you need.
        });
    });
});

>当我们刚刚开始时,我们将ajaxDefer对象设置为已解析状态.这意味着使用.always()附加的任何函数都会立即执行.
>当第一个Ajax调用开始时,我们将旧的ajaxDefer对象替换为尚未解析的新对象.使用ajaxDefer.always()附加的任何新函数将推迟到以后.
>当最后一个Ajax调用完成时,我们调用ajaxDefer.resolve(),这会导致执行任何未执行的延迟函数.现在我们回到初始状态,任何新附加的函数将立即执行.
>当有人试图提交表单时,创建一个匿名函数来完成工作并将其附加到ajaxDefer.它将在适当时执行,具体取决于是否有任何未完成的Ajax请求.注意你的关闭.

javascript – jQuery：仅当页面上当前没有运行AJAX时才提交表单

相关推荐