为什么我的 ajax 调用使页面在第二次调用时没有响应？

Question

我有一个 ajax 调用如下。它在第一次通话时工作正常。但是当我第二次调用它时，它使页面没有响应。我不知道为什么。这存在于文档就绪调用中。我的后端在第二次尝试中被调用，但它陷入了成功。我是这样称呼它的。$('#upload-form').submit(function (event) {        event.preventDefault();        uploadPDF();    });    这是我进行ajax调用的方法。function uploadPDF() {        var form = $('#upload-form')[0];        var data = new FormData(form);            /* call to upload api */        $.ajax({            type: "POST",            enctype: 'multipart/form-data',            url: "/uploadPdf",            data: data,            processData: false,            contentType: false,            cache: false,            async: false,            timeout: 600000,            success: function (data) {                $('#upload-form').trigger("reset");                $('#courses-container').show().siblings().hide();                var toastHTML = '<span>' + data.success + '</span>';                M.toast({                    html: toastHTML,                    classes: 'teal lighten-1'                });            },            error: function (textStatus, errorThrown) {                $('#upload-form').trigger("reset");                var toastHTML = '<span>' + textStatus.responseJSON.error +                    '</span>';                M.toast({                    html: toastHTML,                    classes: 'red lighten-1'                });            }        });    }

Answer 1

async: false使其成为同步请求。它会冻结浏览器，直到请求完成。此功能在现代浏览器中已弃用，不应在现代代码中使用。

同步 XHR 请求通常会导致 Web 挂起。但是开发人员通常不会注意到这个问题，因为挂起只会在网络状况不佳或远程服务器响应缓慢时出现。同步 XHR 现在处于弃用状态。建议开发人员放弃同步 API，改用异步请求。

Answer 2

将此 ajax 请求设置为 Async true。无论第一个请求是否完成，它都将有助于并行执行您的请求。

可选 - 尝试更改内容类型。

下面的代码对我来说工作正常，请尝试让我知道，以防您的问题仍然无法解决。

function uploadPDF() {

    var form = $('#upload-form')[0];

    var data = new FormData(form);

    /* call to upload api */

    $.ajax({

        type: "POST",

        enctype: 'multipart/form-data',

        url: "/uploadPdf",

        data: data,

        processData: false,

        cache: false,

        async: true,

        timeout: 600000,

        success: function (data) {

            $('#upload-form').trigger("reset");

            $('#courses-container').show().siblings().hide();

            var toastHTML = '<span>' + data.success + '</span>';

            M.toast({

                html: toastHTML,

                classes: 'teal lighten-1'

            });

        },

        error: function (textStatus, errorThrown) {

            $('#upload-form').trigger("reset");

            var toastHTML = '<span>' + textStatus.responseJSON.error +

                '</span>';

            M.toast({

                html: toastHTML,

                classes: 'red lighten-1'

            });

        }

    });

}

您的其余代码看起来不错。