Wie man das Senden eines Formulars stoppt, bis eine Ajax-Funktion, die von onSubmit aufgerufen wurde, beendet wurde

Question

Mein Code ist unten. Ich möchte, dass das Formular übermittelt wird, bis die Ajax-Funktion beendet ist. Auf diese Weise kann die submit Variable richtig eingestellt werden. Aber submit hat immer den Standardwert false Wert. Wie bekomme ich das Formular zu warten, bis der Ajax-Aufruf abgeschlossen ist und die submit Variable einen neuen Wert erhält?

$("#CreateCandidateForm").on('submit', function (event) { 
    var theFirstName = $("#FirstName").val(); 
    var theLastName = $("#LastName").val(); 
    var submit = false; 

    $.ajax({ 
     type: "POST", 
     url: "CreateSearch", // the method we are calling 
     contentType: "application/json; charset=utf-8", 
     data: JSON.stringify({ firstName: theFirstName, lastName: theLastName }), 
     dataType: "json", 
     success: function (result) { 
      if (result == false) { 
       submit = true; 
      }      
     }, 
     error: function (exception) { 
      event.preventDefault(); 
      console.log(exception); 
      alert('Exception: ' + exception);   
     } 
    });  
    return submit; 
}); 

Answer 1

Hallo, wie ich Sie verstanden brauchen nur auf true gesetzt stellen, wenn Sie Antwort vom Server in der Ergebnisfunktion erhalten, definiert jQuery jetzt eine ‚wann‘ Funktion für diesen Zweck.

Sie können die vollständige Antwort auf diese Frage sehen und es für Ihre Ajax-Anforderung verwenden:

Wait until all jQuery Ajax requests are done?

$.when(ajax1()).done(function(a1){ 
    //a1 includes ajax1 response 
    submit=true; 
}); 

function ajax1() { 
    return $.ajax({ 
    url: "someUrl", 
    dataType: "json", 
    data: yourJsonData,    
    ... 
    }); 
} 

Answer 2

Einfach immer return false;. Dies verhindert immer das Senden.

Sie können dann in den Erfolg Rückruf einreichen:

success: function (result) { 
    if (!result) { 
     $(this).unbind('submit').submit(); 
    }      
} 

nicht zu lösen Vergessen die eine Endlosschleife verhindern muss.

Sie sollten auch die event.preventDefault() entfernen, da Sie sie nicht mehr benötigen.

Answer 3

jQuery.when() Ermöglicht die Ausführung von Rückruffunktionen basierend auf null oder mehr Objekten, normalerweise verzögerte Objekte, die asynchrone Ereignisse darstellen.

Es wird das submit = true setzen, wenn die Ajax-Anfragen erfolgreich sind.

$.when($.ajax({ 

      type: "POST", 
      url: "CreateSearch", 
      contentType: "application/json; charset=utf-8", 
      data: JSON.stringify({ firstName: theFirstName, lastName: theLastName }) 

     })).then( 

      function(result){ // Success function 
      if (result == false) { 
       submit = true; 
      } 

      },function(exception){ // failure function 
       event.preventDefault(); 
       console.log(exception); 
       alert('Exception: ' + exception); 
     });