Ajax中的多個成功函數

Question

我正在使用Ajax腳本從我的數據庫中獲取數據並將其發布到多個文本框中。 發布數據后，我還想用文本框計算。

當我運行腳本時，我看到該腳本同時運行所有計算。 有人知道如何在我的腳本中構建多個onSuccess函數，以便腳本按正確的順序執行代碼嗎？

這是我的腳本：

$(document).on('change', '[id^=vat1]', function getVat12() { // Do an Ajax request to retrieve the product price 
  console.log("getVat2 before ajax", jQuery('#vat1').val());
  jQuery.ajax({ 
    url: './get/get2.php', 
    method: 'POST', 
    data: {'id' : $('#vat1').val()},
    success: function(response){ 
      // and put the price in text field 
      console.log("getPrice after ajax", jQuery('#vat1').val());
      jQuery('#percentage1').val(response);

      // code 1 
      var numVal1 = Number(document.getElementById('quantity1').value);
      var numVal2 = Number(document.getElementById('price_ex1').value);
      var totalValue1 = numVal1 * numVal2
      document.getElementById('totalprice1').value = totalValue1.toFixed(2);

      //code 2
      var numVal3 = Number(document.getElementById('totalprice1').value);   
      var totalValue2 = numVal3;
      document.getElementById('subtotal').value = totalValue2.toFixed(2);

      //code 3
      var numVal4 = Number(document.getElementById('totalprice1').value);
      var numVal5 = Number(document.getElementById('percentage1').value);
      var totalValue3 = numVal4 / 100 * numVal5
      document.getElementById('vat2').value = totalValue3.toFixed(2);
    }, 
    error: function (request, status, error) { 
      alert(request.responseText); 
    }, 
  });     
});

Answer 1

如果您熟悉承諾，您可以通過執行以下操作來實現相同的目標。

$(document).on('change', '[id^=vat1]', function getVat12() { 
    // Do an Ajax request to retrieve the product price 
    console.log("getVat2 before ajax", jQuery('#vat1').val());
    jQuery.ajax({
        url: './get/get2.php',
        method: 'POST',
        data: {
            'id': $('#vat1').val()
        },
        success: function (response) {
            // and put the price in text field 
            console.log("getPrice after ajax", jQuery('#vat1').val());
            jQuery('#percentage1').val(response);
            calculateTotalPrice().then(function(res) {
                calculateSubTotal().then(function(res1) {
                    calculateTotalFinal().then(function(res2) {
                        console.log('All Done');
                    });
                });
            });
        },
        error: function (request, status, error) {
            alert(request.responseText);
        },
    });
  });

 function calculateTotalPrice() {
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            var numVal1 = Number(document.getElementById('quantity1').value);
            var numVal2 = Number(document.getElementById('price_ex1').value);
            var totalValue1 = numVal1 * numVal2
            document.getElementById('totalprice1').value = totalValue1.toFixed(2);
            resolve('totalSet');
        }, 0)
    });
}

function calculateSubTotal() {
    return new Promise(function(resolve, reject) {
    setTimeout(function(){
        var numVal3 = Number(document.getElementById('totalprice1').value);
        var totalValue2 = numVal3;
        document.getElementById('subtotal').value = totalValue2.toFixed(2);
        resolve('subTotalSet');
    }, 0)
});
}

function calculateTotalFinal() {
return new Promise(function(resolve, reject) {
    setTimeout(function(){
        var numVal4 = Number(document.getElementById('totalprice1').value);
        var numVal5 = Number(document.getElementById('percentage1').value);
        var totalValue3 = numVal4 / 100 * numVal5
        document.getElementById('vat2').value = totalValue3.toFixed(2);
        resolve('finalAmountSet');
    }, 0)
});
}

Answer 2

根據您的問題：

有人知道如何在我的腳本中構建多個onSuccess函數，以便腳本按正確的順序執行代碼嗎？

然后是的，你可以創建多個onSuccess函數。 取自jQuery ajax文檔 ：

從jQuery 1.5開始，成功設置可以接受一系列函數。 每個函數將依次調用。

根據該文檔，您可以傳遞一系列回調來執行，這些回調將按給定的順序調用。 對於您的代碼，這可能是這樣的實現：

$(document).on('change', '[id^=vat1]', function getVat12() { // Do an Ajax request to retrieve the product price 
  console.log("getVat2 before ajax", jQuery('#vat1').val());
  jQuery.ajax({ 
    url: './get/get2.php', 
    method: 'POST', 
    data: {'id' : $('#vat1').val()},
    success: [code1, code2, code3], 
    error: function (request, status, error) { 
      alert(request.responseText); 
    }, 
  });     
});

    function code1(response){ 
      // and put the price in text field 
      console.log("getPrice after ajax", jQuery('#vat1').val());
      jQuery('#percentage1').val(response);

      // code 1 
      var numVal1 = Number(document.getElementById('quantity1').value);
      var numVal2 = Number(document.getElementById('price_ex1').value);
      var totalValue1 = numVal1 * numVal2
      document.getElementById('totalprice1').value = totalValue1.toFixed(2);
    }

    function code2(response){
      //code 2
      var numVal3 = Number(document.getElementById('totalprice1').value);   
      var totalValue2 = numVal3;
      document.getElementById('subtotal').value = totalValue2.toFixed(2);
    }

    function code3(response){ 
      //code 2
      var numVal3 = Number(document.getElementById('totalprice1').value);   
      var totalValue2 = numVal3;
      document.getElementById('subtotal').value = totalValue2.toFixed(2);
    }

關於：

當我運行腳本時，我看到該腳本同時運行所有計算

正如昆汀指出的那樣，情況並非如此。 所執行的任何功能都不是異步的，這意味着它應該以自上而下的方式執行。