Jquery Ajax beforeEnvoyer et succès, erreur & amp; Achevée

J'ai un problème avec deux fonctions ajax où la beforeSend de la deuxième ajax post est exécutée avant la complete fonction de la première ajax.

Le chargement de la classe, je suis en ajoutant à l'espace réservé avant l'envoi est de travailler pour le premier appel ajax. Cependant, peu après la première requête ajax complète la classe est enlevé et jamais ajoute de nouveau sur la deuxième et autres appels (rappelez-vous les appels récursifs).

Pendant le débogage, il montre que la beforeSend fonction de la deuxième appel ajax est appelé en premier et le complete fonction du premier appel ajax est appelée plus tard. Ce qui est évident, parce que le retour de données insérées dans la page à partir du premier appel ajax lance le deuxième appel.

Bref, c'est mélangé. Est-il de toute façon cela peut être trié?

Le code de la fonction est la suivante

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 qui contient l'extrait suivant de javascript/jquery qui vérifie et commence une autre requête ajax.

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

source d'informationauteur Rehan Anis

  1. 39

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

    De cette façon, si le beforeSend énoncé est appelé avant la complete déclaration i sera supérieure à 0, donc il ne sera pas supprimer la classe. Alors que le dernier appel sera en mesure de le retirer.

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

  2. 7

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

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

    Alternativement, vous pouvez passer de bind fonctions de chaque résultat de rappel; l'ordre des paramètres est: (success, failure). Aussi longtemps que vous spécifiez une fonction avec au moins 1 paramètre, vous aurez accès à la réponse. Ainsi, par exemple, si vous vouliez vérifier le texte de la réponse, vous pouvez tout 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