Почему мой вызов ajax заставляет страницу не отвечать при втором вызове? - PullRequest
Новая
       255

Почему мой вызов ajax заставляет страницу не отвечать при втором вызове?

0 голосов
/ 07 августа 2020

Мне позвонили 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'
                });
            }
        });
    }

Ответы [ 2 ]

1 голос
/ 07 августа 2020

async: false делает его синхронным запросом . Он замораживает браузер до завершения запроса. Эта функция устарела в современных браузерах и никогда не должна использоваться в современном коде.

Синхронные запросы XHR часто вызывают зависания в Интернете. Но разработчики обычно не замечают проблемы, потому что зависание проявляется только в плохих сетевых условиях или когда удаленный сервер медленно отвечает. Синхронный XHR находится в состоянии устаревания. Рекомендуется, чтобы разработчики отказались от синхронного API и вместо этого использовали асинхронные запросы.

0 голосов
/ 07 августа 2020
  • Сделайте этот ajax запрос как Asyn c 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'
            });
        }
    });
}

Остальная часть вашего кода выглядит нормально.

...