0

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

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

我对 jquery 还是很陌生，而且我在自学，所以我可能会遗漏一些东西。

表格看起来像这样

A（文本）、B（下拉）、C（下拉）、数量、单位成本、总价

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

Qty 的代码本质上是相同的 - 只是字段和 php 脚本被警告。两者都正常工作。

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

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

（document.getElementById 中的变量已经在别处定义）；

有任何想法吗？

4

2 回答 2

1

您需要记住 AJAX 中的 A 代表异步，这意味着 AJAX 请求的结果不会立即供您使用。相反，浏览器将执行请求，完成您调用堆栈上的所有其他内容，然后，如果您的请求在那时返回响应，您的 ajax 成功执行。

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

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

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;
}
于 2013-03-04T06:51:14.833 回答
0

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();
});
于 2013-03-04T06:07:50.220 回答