Tengo una llamada ajax como se muestra a continuación. Funciona bien en la primera llamada. Pero cuando lo llamo por segunda vez, la página no responde. No puedo entender por qué. Esto está presente en la llamada lista de documentos. Se llama a mi backend en el segundo intento, pero se atasca dentro del éxito. Así es como lo llamo.

$('#upload-form').submit(function (event) {
        event.preventDefault();
        uploadPDF();
    });
    

Aquí está mi método para hacer una llamada 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'
                });
            }
        });
    }
0
Pawan Kumar 7 ago. 2020 a las 15:41

2 respuestas

La mejor respuesta

async: false lo convierte en una solicitud síncrona. Congela el navegador hasta que finaliza la solicitud. Esta función está obsoleta en los navegadores modernos y nunca debe usarse en código moderno.

Las solicitudes XHR sincrónicas a menudo provocan bloqueos en la web. Pero los desarrolladores generalmente no notan el problema porque el bloqueo solo se manifiesta con malas condiciones de red o cuando el servidor remoto tarda en responder. XHR sincrónico ahora está en estado de desaprobación. La recomendación es que los desarrolladores se alejen de la API síncrona y utilicen solicitudes asincrónicas.

1
I wrestled a bear once. 7 ago. 2020 a las 12:51
  • Haga que esta solicitud ajax sea Async verdadera. ayudará en la ejecución paralela de su solicitud, ya sea que se complete o no la primera.
  • Opcional: intente cambiar el tipo de contenido.

El siguiente código funcionó bien para mí, intente y avíseme en caso de que su problema aún no se resuelva.

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

El resto de su código se ve bien.

0
Arshad Alam 7 ago. 2020 a las 14:23