Wie kann man Ajax nacheinander mit einem Submit-Button posten?

Question

Ich habe einen Code erstellt, der Ajax-Post aufrufen. Irgendwann ist die Reihenfolge des Prozesses richtig, manchmal nicht. Ich will Ajax Post, die immer die richtige Reihenfolge haben, von Funktion 1 bis Funktion 4. Jede Funktion hat einen anderen Form Wert, also muss ich es wirklich beheben. Kann jemand in meinen Code schauen?

<script> 

$(document).ready(function() { 
$('#unggah<?php echo $mhs?>').submit(function (event) { 

//FUNCTION 1 

     this.reset(); 
     $('#loading<?php echo $mhs?>').show(); 

     var formData = { 
      'tahun': $('input[name=tahun<?php echo $mhs?>]').val(), 
      'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(), 
      'posisi': $('input[name=posisi1<?php echo $mhs?>]').val(), 
      'tabel': $('input[name=tabel<?php echo $mhs?>]').val() 
     }; 
     $.ajax({ 
      type: 'POST', 
      url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>', 
      data: formData, 
      Async:false, 
      dataType: 'json', 
      encode: true 
     })  
     .done(function (data1<?php echo $mhs?>) { 
      console.log(data1<?php echo $mhs?>); 

     }) 

     .fail(function (data1<?php echo $mhs?>) { 
      console.log(data1<?php echo $mhs?>); 

     }); 

     event.preventDefault(); 

//FUNCTION 2 

     var formData2 = { 
      'tahun': $('input[name=tahun<?php echo $mhs?>]').val(), 
      'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(), 
      'posisi': $('input[name=posisi2<?php echo $mhs?>]').val(), 
      'tabel': $('input[name=tabel<?php echo $mhs?>]').val() 
     }; 
     $.ajax({ 
      type: 'POST', 
      url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>', 
      data: formData2, 
      Async:false, 
      dataType: 'json', 
      encode: true 
     })  
     .done(function (data2<?php echo $mhs?>) { 
      console.log(data2<?php echo $mhs?>);  
     }) 

     .fail(function (data2<?php echo $mhs?>) { 
      console.log(data2<?php echo $mhs?>); 
     }); 

     event.preventDefault(); 

//FUNCTION 3   

var formData3 = { 
      'tahun': $('input[name=tahun<?php echo $mhs?>]').val(), 
      'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(), 
      'posisi': $('input[name=posisi3<?php echo $mhs?>]').val(), 
      'tabel': $('input[name=tabel<?php echo $mhs?>]').val() 
     }; 
     $.ajax({ 
      type: 'POST', 
      url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>', 
      data: formData3, 
      Async:false, 
      dataType: 'json', 
      encode: true 
     })  
     .done(function (data3<?php echo $mhs?>) { 
      console.log(data3<?php echo $mhs?>); 

     }) 

     .fail(function (data3<?php echo $mhs?>) { 
      console.log(data3<?php echo $mhs?>); 
     }); 

     event.preventDefault(); 

// FUNCTION 4 

var formData4 = { 
      'tahun': $('input[name=tahun<?php echo $mhs?>]').val(), 
      'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(), 
      'posisi': $('input[name=posisi4<?php echo $mhs?>]').val(), 
      'tabel': $('input[name=tabel<?php echo $mhs?>]').val() 
     }; 
     $.ajax({ 
      type: 'POST', 
      url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>', 
      data: formData4, 
      Async:false, 
      dataType: 'json', 
      encode: true 
     })  
     .done(function (data4<?php echo $mhs?>) { 
      console.log(data4<?php echo $mhs?>); 
     }) 

     .fail(function (data4<?php echo $mhs?>) { 
      console.log(data4<?php echo $mhs?>); 
     }); 
     event.preventDefault(); 
     }); 
}); 

     </script> 

Answer 1

Sie separate Funktion für jeden Ajax-Request und rufen Sie von einer anderen Erfolg Funktion man schreiben können.

function callAjax3(){ 
var formData3 = { 
      'tahun': $('input[name=tahun<?php echo $mhs?>]').val(), 
      'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(), 
      'posisi': $('input[name=posisi3<?php echo $mhs?>]').val(), 
      'tabel': $('input[name=tabel<?php echo $mhs?>]').val() 
     }; 
     $.ajax({ 
      type: 'POST', 
      url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>', 
      data: formData3, 
      dataType: 'json', 
      encode: true 
     })  
     .done(function (data3<?php echo $mhs?>) { 
      console.log(data3<?php echo $mhs?>); 
      callAjax4() // calling 4th function 

     }) 

     .fail(function (data3<?php echo $mhs?>) { 
      console.log(data3<?php echo $mhs?>); 
     }); 

} 

function callAjax2(){ 
//FUNCTION 2 

     var formData2 = { 
      'tahun': $('input[name=tahun<?php echo $mhs?>]').val(), 
      'jurusan': $('input[name=jurusan<?php echo $mhs?>]').val(), 
      'posisi': $('input[name=posisi2<?php echo $mhs?>]').val(), 
      'tabel': $('input[name=tabel<?php echo $mhs?>]').val() 
     }; 
     $.ajax({ 
      type: 'POST', 
      url: '<?=base_url()?>operator_pt/unggah/<?php echo $proses.'_'.$CL?>', 
      data: formData2, 
      dataType: 'json', 
      encode: true 
     })  
     .done(function (data2<?php echo $mhs?>) { 
      console.log(data2<?php echo $mhs?>);  
       callAjax3(); // calling 3rd function 
     }) 

     .fail(function (data2<?php echo $mhs?>) { 
      console.log(data2<?php echo $mhs?>); 
     }); 

} 

Answer 2

Sie können jeden Ajax-Aufruf in der done() - Funktion des vorherigen verschachteln. Auf diese Weise wird der n + 1-te Anruf nur ausgeführt, wenn der n-te Anruf (erfolgreich) abgeschlossen wurde.

z.B.

$.ajax({data}).done(function() { 
    $.ajax({data}).done(function() {...}) 
}) 

Answer 3

Ihre .done( Rückrufe aufgerufen werden, nachdem eine Anforderung erfolgreich abgeschlossen wurde.

Machen Sie Ihre zweite Anfrage im .done( Rückruf der ersten ein, Sie dritte Anfrage - in der .done( Rückruf der zweiten Anfrage usw.

, dass die richtigen Abruf gewährleisten.

... und das ist, was sie nennen Pyramid of doom

Answer 4

Wenn ich Ihre Anfrage richtig verstanden habe, dann suchen Sie nach einer Möglichkeit, 2 Formulare mit einem einzigen Senden Button zu senden.

Sie können dies erreichen, indem zweite Formular manuell jquery .submit() -Methode in Erfolg der ersten Form der Ajax-Aufruf verwenden.

Lassen Sie mich wissen, wenn Sie für diese aktualisiertem Code benötigen.