在获取ajax更新到另外两个后更新第三个字段

Question

我有一个包含3个元素（Qty，UnitCost和TotalPrice）的表单，这些元素是根据表单中其他数据的结果计算出来的。

Qty和UnitCost正在基于jquery Get正确填写，但是总的价格，我只是使用普通的旧javascript不会更新，除非我在之前的字段中进行更改（之后它会正确更新） 。

我对jquery仍然非常陌生，因为我正在学习自我，所以我可能会错过一些东西。

表单看起来像这样

A（文本），B（下拉），C（下拉），数量，UnitCost，TotalPrice

//Get the unit cost 
$.get("calcCost.php", {item:item}, function(data) { 
    document.getElementById(unitCostField).value = data; 
}); 
unitCost = document.getElementById(unitCostFiled).value; 

对数量的代码基本上是相同的 - 只要字段和php脚本都会收到警报。两者都正常工作。

但是，当我尝试计算TotalPrice（这只是Qty * UnitCost）时，它不会立即更新。它从0开始 - 预计当数量或单位成本尚未填充时。

//Total Cost 
cost = unitCost * qty 
document.getElementById(costField).value = cost; 

（document.getElementById中的变量已经在其他地方定义过了）;

任何想法？

Answer 1

您正在检索unitCostField值，该值已由AJAX请求填充之前。即使unitCost分配低于$.get方法，它仍会在AJAX请求完成之前执行。

依赖于AJAX请求的代码必须在回调函数内处理。

var qty; 

function calcCost() { 
    var unitCost = document.getElementById(unitCostField).value, 
     cost = unitCost * qty; 
    document.getElementById(costField).value = cost; 
} 

$.get("calcCost.php", {item:item}, function(data) { 
    document.getElementById(unitCostField).value = data; 
    calcCost(); 
}); 

Answer 2

你必须要记住，在AJAX代表异步这意味着一个AJAX请求的结果不会是可立即供您使用。相反，浏览器将执行请求，完成您在调用堆栈中的所有其他操作，然后才能提供您的请求在那段时间之前返回响应，您的ajax成功执行。

您提供的示例更加有趣，因为您的成本计算例程在数量和UnitCost请求都完成后需要运行，并且只有在它们都成功时。我相信像这样的问题的最佳解决方案，特别是你已经使用jQuery，是延迟对象。

jquery docs for $ .when（这是您可能要考虑使用的方法）显示与您的问题几乎完全相同的问题的解决方案。然而，为了方便起见（错误处理程序为简洁起见省略）：

var calcCostReq = $.get("calcCost.php", {item:item}).done(function(data) { 
    document.getElementById(unitCostField).value = data; 
    unitCost = document.getElementById(unitCostFiled).value; 
}); 
var qtyReq = $.get("qty.php").done(function(data) { 
    //whatever you need to do when qty was successful 
}); 
$.when(calcCostReq, qtyReq).done(function() { 
    cost = unitCost * qty 
    document.getElementById(costField).value = cost; 
}