为什么我的 ajax 调用在第二次调用时使页面无响应？答案

【问题标题】：Why my ajax call is make page unresponsive on second call?为什么我的 ajax 调用在第二次调用时使页面无响应？
【发布时间】：2020-11-27 19:26:04
【问题描述】：

我有一个如下的 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'
                });
            }
        });
    }

【问题讨论】：

看起来您的服务器在第二次尝试时变得无响应。将async: false 与$.ajax 一起使用几乎不是一个好主意。
@RoboRobok 谢谢。这就是问题所在:)

标签： javascript html jquery ajax material-design

【解决方案1】：

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

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

【讨论】：

【解决方案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'
            });
        }
    });
}

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

【讨论】：