在獲取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; 
}