加载微调器在 AJAX 表单提交期间不会触发

Question

我在使用 AJAX 提交表单时遇到问题。我正在使用blockUI插件在AJAX请求期间阻止UI，并以"请稍候..."显示加载微调器通知。它与更新/插入查询类型完美配合，但在选择期间它甚至不会出现。

此刻我绑定到之前发送

beforeSend: function() {
    $.blockUI({ message: '<img src="img/loading.gif"/> <br /> <h1>Please wait...</h1>' } );
},

我在成功时取消阻止它，我认为这就是问题所在，因为当我在服务器端检查它时，据说需要 0.0000 秒才能执行该查询，但在用户端，提交表单和用结果填充div 之间存在延迟。

是否有任何其他事件可以将取消阻止操作绑定到？我试图将其绑定到文档就绪状态，但由于内容是使用 AJAX 生成的，因此它不起作用。

编辑AJAX 代码如下

    $("form#formID").submit(function(event){
        event.preventDefault();
        var formData = new FormData($(this)[0]);
        var formURL = 'php/formURL.php';
        $.ajax({
            url: formURL,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                $.blockUI({ message: '<img src="img/loading.gif"/> <br /> <h1>Please wait...</h1>' } );
            },
            success: function (returndata) {
                $.unblockUI();
                $("#div-result").html(returndata);
            },
            error:  function (returndata) {
                $.unblockUI();
                $("#div-result").html(returndata);
            },
        });
    return false;
    });

Answer 1

使用这个：-

$("form#formID").submit(function(event){

   $.blockUI({ message: '<img src="img/loading.gif"/> <br /> <h1>Please wait...</h1>' } );
            event.preventDefault();
            var formData = new FormData($(this)[0]);
            var formURL = 'php/formURL.php';
            $.ajax({
                url: formURL,
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (returndata) {
                    $.unblockUI();
                    $("#div-result").html(returndata);
                },
                error:  function (returndata) {
                    $.unblockUI();
                    $("#div-result").html(returndata);
                },
            });
        return false;
        });