我正在使用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);
},
});
});
解决方法:
如果您熟悉承诺,您可以通过执行以下操作来实现相同的目标.
$(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)
});
}