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

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

函数上传PDF（）{
变量形式=$（“#上传形式”）[0]；
var数据=新表格数据（表格）；
/*调用以上载api*/
$.ajax({
类型：“POST”，
enctype:“多部分/表单数据”，
url:“/uploadPdf”，
数据：数据，
processData:false，
contentType:false，
cache:false，
async:false，
超时：600000，
成功：功能（数据）{
$（'#上传表单'）。触发器（“重置”）；
$（“#课程容器”）.show（）.sides（）.hide（）；
var toastHTML=''+data.success+''；
M.吐司({
html:toastHTML，
课程：“蓝绿色-1”
});
},
错误：函数（textStatus，errorshown）{
$（'#上传表单'）。触发器（“重置”）；
var toastHTML=''+textStatus.responseJSON.error+
'';
M.吐司({
html:toastHTML，
课程：“红色-1”
});
}
});
}

async:false

使其成为一个错误。它会冻结浏览器，直到请求完成。此功能在现代浏览器上已被弃用，不应在现代代码中使用

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

• 将此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'
            });
        }
    });
}

函数上传PDF（）{
变量形式=$（“#上传形式”）[0]；
var数据=新表格数据（表格）；
/*调用以上载api*/
$.ajax({
类型：“POST”，
enctype:“多部分/表单数据”，
url:“/uploadPdf”，
数据：数据，
processData:false，
cache:false，
async:true，
超时：600000，
成功：功能（数据）{
$（'#上传表单'）。触发器（“重置”）；
$（“#课程容器”）.show（）.sides（）.hide（）；
var toastHTML=''+data.success+''；
M.吐司({
html:toastHTML，
课程：“蓝绿色-1”
});
},
错误：函数（textStatus，errorshown）{
$（'#上传表单'）。触发器（“重置”）；
var toastHTML=''+textStatus.responseJSON.error+
'';
M.吐司({
html:toastHTML，
课程：“红色-1”
});
}
});
}

---

其余代码看起来很好。

服务器在第二次尝试时似乎没有响应。将

async:false

与

$一起使用。ajax

几乎从来都不是一个好主意。@RoboRobok谢谢。这就是问题所在：）