次のajaxを実行する前にajaxを実行します

Question

データベースに2つのテーブルがあり、送信ボタンを押すとトレーダーテーブルに新しいトレーダーを挿入し、laravel 5.2を使用してポストajaxを使用して別のポストajaxを実行しますこの場合の問題は、私が最初のAjaxの前に2番目のAjaxを実行するサブミットを押すときです。なぜですか？

$(document).ready(function(e) { 

$('#invoiceForm').validate({ 

    //rules: itemRules, 

    errorPlacement: function (element) { 
     return false; 
    }, 
    submitHandler: function (event) { 
     //event.preventDefault(); 
     // $('#selectedTraderName').valid(); 
     var allItems = []; 
     $('tr.inputsItem').each(function() { 
     rowData = $(this).children('td').find('.form-control').map(function() { 
      return $(this).val(); 
     }).get(); 
      rowData.push(parseInt($(this).children('td').find('strong#autoTotal').text().trim())); 
      if($('select[id=selectedTraderName]').val() <= lastTraderID) { 
       rowData.push($('select[id=selectedTraderName]').val()); 
      } 
      else{ 
       newTrader = []; 
       newTrader.push($('#name').val()); 
       newTrader.push($('#traderMail').val()); 
       newTrader.push($('#mobileNumber').val()); 
       newTrader.push($('#address').val()); 
       $.ajax({ 
        type: 'POST', 
        url: insertNewTrader, 
        data:{_token:token, trader:newTrader} 
       }).done(function (msg) { 
        rowData.push(msg['id']); 
       }); 

      } 
      alert(rowData[6]); 
      allItems.push(rowData); 
      $.ajax({ 
       type: 'POST', 
       url: insertNewItem, 
       data:{_token:token, items:allItems} 
      }).done(function() { 
       alert('done'); 
      }); 
     }); 


    } 

}); 

Answer 1

、あなたは巣のAJAX呼び出しができないためif/else文の代わりに、あなたは、このようなDeferred object使用することができます：私はthsiはあなたを助けることを願っています

rowData.push(parseInt($(this).children('td').find('strong#autoTotal').text().trim())); 
// Create a new Deferred object 
var deferred = $.Deferred(); 
if ($('select[id=selectedTraderName]').val() <= lastTraderID) { 
    rowData.push($('select[id=selectedTraderName]').val()); 
    //Nothing to wait just resolve the deferred 
    deferred.resolve(); 
} else { 
    newTrader = []; 
    newTrader.push($('#name').val()); 
    newTrader.push($('#traderMail').val()); 
    newTrader.push($('#mobileNumber').val()); 
    newTrader.push($('#address').val()); 
    $.ajax({ 
     type: 'POST', 
     url: insertNewTrader, 
     data: { 
      _token: token, 
      trader: newTrader 
     } 
    }).done(function(msg) { 
     rowData.push(msg['id']); 
     //Resolve the deferred 
     deferred.resolve(); 
    }); 

} 
//When the deferred resolved then execute your next ajax request 
deferred.then(function() { 
    allItems.push(rowData); 
    $.ajax({ 
     type: 'POST', 
     url: insertNewItem, 
     data: { 
      _token: token, 
      items: allItems 
     } 
    }).done(function() { 
     alert('done'); 
    }); 
}); 

を。

Answer 2

第2のajax要求条件を確認し、第1のajax関数の完了セクション/成功セクションの第2のajax関数を呼び出します。もちろん

$.ajax({ 
    type: 'POST', 
    url: insertNewItem, 
    data:{_token:token, items:allItems}, 
    complete : function(){ 
    //call ur 2nd ajax request here 
    }, 
    success : function(data){ 
    console.log(data); 
    //call ur 2nd ajax request here 
    } 
});