时间戳

首页 > 解决方案 > 为什么我的 ajax 调用在第二次调用时使页面无响应？

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

标签： javascripthtmljqueryajaxmaterial-design

解决方案

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

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

推荐阅读