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 documentation：

从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);
    }

关于：

运行脚本时，我看到脚本同时运行所有计算

正如Quentin所指出的，情况并非如此。执行的功能都不是异步的，这意味着应该以自顶向下的方式执行。

Ajax中的多个成功功能

2 个答案: