web-dev-qa-db-fra.com

Jquery Ajax beforeSend and success, error & complete

J'ai un problème avec plusieurs fonctions ajax où le beforeSend du second ajax post est exécuté avant le complete fonction du premier ajax .

La classe de chargement que j'ajoute à la marque de réservation avant l'envoi fonctionne pour le premier appel ajax. Cependant, peu de temps après la fin de la première demande ajax, la classe est supprimée et n'est jamais rajoutée lors du deuxième appel et des appels suivants (rappelez-vous des appels récursifs).

Lors du débogage, cela montre que la fonction beforeSend du deuxième appel ajax est appelée en premier et que la fonction complete du premier appel ajax est appelée ultérieurement. Ce qui est évident, car les données de retour insérées dans la page du premier appel ajax commencent le deuxième appel.

En bref, c'est mélangé. Est-il possible de résoudre ce problème?

Le code de fonction est comme suit

function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // setting a timeout
        $(placeholder).addClass('loading');
    },
    success: function(data) {
        if (append) {
            $(placeholder).append(data);
        } else {
            $(placeholder).html(data);
        }
    },
    error: function(xhr) { // if error occured
        alert("Error occured.please try again");
        $(placeholder).append(xhr.statusText + xhr.responseText);
        $(placeholder).removeClass('loading');
    },
    complete: function() {
        $(placeholder).removeClass('loading');
    },
    dataType: 'html'
});
}

Et les données contiennent l'extrait suivant de javascript/jquery qui vérifie et lance une autre demande ajax.

<script type="text/javascript">//<!--
 $(document).ready(function() {
    $('#restart').val(-1)
    $('#ajaxSubmit').click();
});
//--></script>
javascriptjqueryajaxrecursion
27
Rehan Anis

Peut-être que vous pouvez essayer ce qui suit:

var i = 0;
function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // setting a timeout
        $(placeholder).addClass('loading');
        i++;
    },
    success: function(data) {
        if (append) {
            $(placeholder).append(data);
        } else {
            $(placeholder).html(data);
        }
    },
    error: function(xhr) { // if error occured
        alert("Error occured.please try again");
        $(placeholder).append(xhr.statusText + xhr.responseText);
        $(placeholder).removeClass('loading');
    },
    complete: function() {
        i--;
        if (i <= 0) {
            $(placeholder).removeClass('loading');
        }
    },
    dataType: 'html'
});
}

Ainsi, si l'instruction beforeSend est appelée avant l'instruction complete, i sera supérieure à 0 et ne supprimera donc pas la classe. Ensuite, seul le dernier appel pourra le supprimer.

Je ne peux pas le tester, laissez-moi savoir si cela fonctionne ou non.

52
Serge K.

C'est en fait beaucoup plus facile avec API de promesse de jQuery :

$.ajax(
            type: "GET",
            url: requestURL,
        ).then((success) =>
            console.dir(success)
        ).failure((failureResponse) =>
            console.dir(failureResponse)
        )

Alternativement, vous pouvez transmettre des fonctions bind à chaque rappel de résultat; l'ordre des paramètres est: (success, failure). Tant que vous spécifiez une fonction avec au moins 1 paramètre, vous avez accès à la réponse. Ainsi, par exemple, si vous voulez vérifier le texte de la réponse, vous pouvez simplement faire:

$.ajax(
            type: "GET",
            url: @get("url") + "logout",
            beforeSend: (xhr) -> xhr.setRequestHeader("token", currentToken)
        ).failure((response) -> console.log "Request was unauthorized" if response.status is 401
7
user1429980