1つの送信ボタンで1つずつAjaxをポストするには？

Question

私はajax投稿を呼び出すコードをいくつか作成しました。プロセスの順序が正しい場合もありますが、時折そうではありません。私は関数1から関数4まで、常に正しい順序を持つAjaxポストが必要です。すべての関数は異なるフォーム値を持つので、実際に修正する必要があります。 誰かが自分のコードを調べることはできますか？

<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

を呼びました。

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

各ajax呼び出しを前の関数のdone（）関数にネストすることができます。このようにして、n + 1回目のコールは、n回目のコールが正常に完了した後にのみ発生します。

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

Answer 3

.done(コールバックは、要求が正常に完了した後に呼び出されます。など正しい呼び出し順序を保証します

第二リクエストの.done(コールバックでは、 -

は第一1、あなたの第三の要求の.done(コールバックであなたの第二の要求を行います。

...そしてそれは、彼らはあなたがそれぞれのAjaxリクエストのために別の関数を記述し、別の成功関数から1を呼び出すことができますPyramid of doom

Answer 4

質問が正しく理解されていれば、1回の送信ボタンクリックで2つのフォームを送信する方法を探しています。

これは、最初のフォームのajax呼び出しが成功した場合にjquery .submit（）メソッドを使用して手動で2番目のフォームを送信することで実現できます。

更新コードが必要な場合はお知らせください。