jQuery Warte auf Ajax, bevor ich das Formular abschicke

Question

Ich habe drei Ajax-Funktionen, die ich vervollständigen möchte, bevor ein Formular gesendet wird, aber sie werden auch beim Senden ausgelöst.

Was wäre der beste Weg, um jQuery zu warten, bis alle Ajax-Funktionen abgeschlossen sind, bevor das Formular gesendet wird? Mein Code ist wie folgt:

$.when( 
    $.ajax(/* ... */), 
    $.ajax(/* ... */) 
).then( 
    mySuccess, 
    myFailure, 
    myProgress 
); 

... wo mySuccess, myFailure und myProgress Funktionen, die jeder Griff:

$('form[name="regForm"]').on('submit', function() { 
    ajaxFuncOne(); 
    ajaxFuncTwo(); 
    ajaxFuncThree(); 
}); 

Answer 1

Da Sie jQuery verwenden, Sie .when() .then() verwenden, sollten Fall. Hinweis mySuccess wird aufgerufen, wenn alle verzögerten Objekte Erfolg zurückgegeben haben, aber myFailure wird aufgerufen, wenn einer der zurückgestellten fehlschlägt, ohne auf den Rest zu warten. myProgress wird aufgerufen, wenn einer von ihnen Erfolg zurückgegeben hat, aber nicht alle.

Siehe Deferred Object für eine vollständige Palette von Methoden für verzögerte Objekte und wie Sie mit Versprechen in jQuery arbeiten.

Answer 2

Definieren Sie eine Zählervariable zum Nachverfolgen, wie viele Ajax-Funktionen in dem für alle Funktionen zugänglichen Bereich erfolgreich waren. Nehmen wir an, es heißt c. Verhindern Sie dann die Einreichung, wenn sie nicht gleich drei ist. Deaktivieren Sie die Schaltfläche, um weitere Klicks zu vermeiden.

$('form[name="regForm"]').on('submit', function() { 
    if(c < 3) { 
    e.preventDefault(); 
    $(this).attr('disabled','disabled'); 
    ajaxFuncOne(); 
    ajaxFuncTwo(); 
    ajaxFuncThree(); 
    } 
}); 

Dann rufen Sie die folgenden in jedem erfolgreichen Handler.

function track() { 
    if(++c == 3) $('form[name="regForm"]').submit(); 
} 

Nur wenn alle drei erfolgreich waren, wird das Formular gesendet.

Answer 3

1. zuerst die Vorlage stoppen (mit e.preventDefault();),
2. dann in einer $.when() Funktion Ihre Ajax-Aufrufe wickeln,
3. Dann senden Sie das Formular.

Vergessen Sie nicht, die on('submit') Zuhörer Funktionalität vor dem Absenden zu lösen, sonst werden Sie in einer Endlosschleife am Ende (wie submit()on('submit') Auslösung werden, die submit() Auslösung wird, und so weiter).

Wie so:

$('form[name="regForm"]').on('submit', function(e) { 

    e.preventDefault(); 

    $.when(
     ajaxFuncOne(); 
     ajaxFuncTwo(); 
     ajaxFuncThree(); 
    ).done(function(){ 
     $('form[name="regForm"]').unbind('submit').submit(); 
    }); 
}); 

Siehe https://api.jquery.com/jquery.when/ für weitere Informationen über $ .when().