使用 Jquery 将表单提交到数据库时如何显示加载答案

【问题标题】：How to show loading when a form is being submitting to the database using Jquery使用 Jquery 将表单提交到数据库时如何显示加载
【发布时间】：2017-08-16 16:29:19
【问题描述】：

我试图在表单提交到数据库时显示加载，但没有运气。表单提交后的加载展示。

我正在使用 Jquery 来提交表单。

$("form#data").on('submit',function(e){
        e.preventDefault();
        $('.loading').show(); // show loading while form submit to database.

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'includes/new_post.php',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                $('.note').html(data);
                $('.loading').hide(); // hide loading after form submitted.
            },
            cache: false,
            contentType: false,
            processData: false

        });

        return false;
    });

请帮忙。

【问题讨论】：

这个问题完全是由async: false 引起的，因为它在请求过程中阻止了 UI 更新。删除该属性，您的代码将正常工作
谢谢，我真的很感激。完美运行

标签： jquery .post

【解决方案1】：

为此尝试使用 beforeSend 功能，也可以完成功能。希望我的建议对你有所帮助。

    $("form#data").on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData($(this)[0]);

    $.ajax({
        url: 'includes/new_post.php',
        type: 'POST',
        data: formData,
        async: false,
        beforeSend: function() {
            $('.loading').show(); // show loading while form submit to database.
        },
        success: function(data) {
            $('.note').html(data);

        },
        complete: function() {
            $('.loading').hide(); // hide loading after form submitted.
        },
        cache: false,
        contentType: false,
        processData: false

    });

    return false;
});

【讨论】：