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

时间:2015-03-09 04:49:04

标签: jquery ajax spinner loading blockui

我在使用AJAX提交表单时遇到问题。我正在使用blockUI插件在AJAX请求期间阻止UI并向加载微调器显示“请稍候...”通知。它与UPDATE / INSERT INTO类型的查询完美配合,但在SELECT期间甚至不会出现。

此刻我将它绑定到beforeSend

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

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

是否还有其他事件可以将解除阻止操作绑定到?我试图将它绑定到文档就绪,但由于内容是使用AJAX生成的,因此无效。

EDIT 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;
    });

1 个答案:

答案 0 :(得分:0)

使用: -

$("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;
        });