为什么我的 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() {&nbsp; &nbsp; var form = $('#upload-form')[0];&nbsp; &nbsp; var data = new FormData(form);&nbsp; &nbsp; /* call to upload api */&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; enctype: 'multipart/form-data',&nbsp; &nbsp; &nbsp; &nbsp; url: "/uploadPdf",&nbsp; &nbsp; &nbsp; &nbsp; data: data,&nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; async: true,&nbsp; &nbsp; &nbsp; &nbsp; timeout: 600000,&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#upload-form').trigger("reset");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#courses-container').show().siblings().hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var toastHTML = '<span>' + data.success + '</span>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; M.toast({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html: toastHTML,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; classes: 'teal lighten-1'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function (textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#upload-form').trigger("reset");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var toastHTML = '<span>' + textStatus.responseJSON.error +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</span>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; M.toast({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html: toastHTML,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; classes: 'red lighten-1'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}您的其余代码看起来不错。