为什么我的Ajax调用没有检索到请求的值？

Question

我在下拉列表中有各种产品。如果我更换产品，那么价格会发生变化，而且生产线成本也会随着订购数量的变化而变化。

问题：当我选择产品时，会对我的数据库进行Ajax调用。返回正确的price。都好。当我从下拉列表中选择替代产品时，产品ID及其变量value会正确更改。但是，price不会返回新的正确价格，而是显示上一个查询的值。也就是说，似乎正在缓存price，或者没有清除数组data[0].price或者Ajax调用失败。我不相信Ajax调用失败，好像我进行了进一步的产品更改，我得到了一个新的结果，但是再次来自前面的查询的price值。最重要的是，我的price始终是一个查询。我尝试过使用cache:false，但这已经有所不同。我还尝试将变量result的长度设置为0，这只会导致undefined错误。

 $(".product_id").on('change', function() {                      //THIS GETS THE VALUE OF A PRODUCT FROM THE DB

   var value = parseFloat($(this).val()); // product_id
   var row =  $(this).parents(':eq(1)').find('input').filter(".cost");
   var rowPrice = $(this).parents(':eq(1)').find('input').filter(".price");

    // then we use the product_id to grab the price using AJAX //
    $.ajax({
        type: 'GET',
        url: 'product_prices/' + value,
        cache:false,
        success: function(data) {
                data = JSON.parse(data);
                var result = data[0].price;
                var price = Number(result);  //.toFixed(2);
                row.data('price', price); // store the row's current price in memory
                rowPrice.val(price); // allocate the price to the location called rowPrice
        }
    });

   var quantity = $(this).parents(':eq(1)').find('input').filter(".quantity").val();

    if (quantity > 0){
        var price = row.data('price');
        var cost = (price * quantity);
        cost = Number(cost); //.toFixed(2);
        var displaycost =  $.formatNumber(cost,{format:"#,###.00",locale:"ca"});
        row.val(displaycost);

        var subTotal = 0;
        $("input.cost").each(function(){
            var ic = $(this).val();
            if (ic !==''){
                var inputCost = parseFloat(ic.replace(/,/g, ''));
                subTotal += inputCost;}
        });

        var discount_percent = $("#discount").val();
        if(discount_percent ==""){
            discount_percent = 0;
        }
        var calculations = newCalculate(subTotal, discount_percent);
        setValues(calculations, $("#updateValues"));

    }
});

Answer 1

Ajax调用是异步的，这意味着您为它提供的回调函数只会在以后执行。在你的情况下，这意味着这句话：

row.data('price', price);

稍后（异步）执行，而不是这个：

var price = row.data('price');

...这确实意味着您将price设置为先前检索的值。

为避免这种情况，您可能希望将大部分代码移动到success提供的$.ajax()回调函数中，以便只有在您实际收到数据时才会执行价。