Question

我有一个需要进行数值计算的javascript函数。此计算中使用的某些数字存储在数据库中，它们将根据用户填写在线表单的方式而有所不同。一旦用户填写表单，他们将单击CALCULATE按钮。此时，在JS函数中，我想使用ajax从数据库中获取与用户选择的其他值相对应的值。

举个简单的例子：有3种尺寸的T恤，每种尺码都有不同的价格（存储在数据库中）。用户选择大小，当他们点击CALCULATE时，我使用ajax来获得与他们选择的大小相关的价格。

问题是，我想使用ajax更新一些我稍后将在脚本中使用的变量。我现在尝试这样做的方式不起作用，脚本中的变量没有从ajax更新，我只能访问ajax调用的success函数内的数据库中的值。我理解这是因为ajax本质上是异步的，并且需要一些时间，等待从服务器返回数据，而该函数仍然继续运行

在下面的示例中，ajax调用返回JSON数据，我有一个名为isjson()的函数，用于测试返回的字符串是否实际上是JSON数据。

示例代码：

function calculate_cost(){

    var price = 0;
    var size = $('form#tshirt_form [name="size"] option:selected').val();
    $.ajax({
        url:'my_script.php',
        type:'post',
        data:'select=price&table=tshirts.prices&where=size = "' + size + '"',
        success:function(data){
            if(isjson(data)){
                data = $.parseJSON(data);
                data = data[0];
                price = data['price'];
            }else{
                //display error getting data
            }
        }
    });
    //  continue code for calculation
    //  this alert will display "0", but I want the price from the database in there
    alert(price);
    //perhaps do other ajax calls for other bits of data
    //...
    return final_price;
}

有谁知道如何实现这一点，用ajax实时更新变量？

非常感谢！

**编辑**

感谢大家的帮助，我理解ajax是异步的。我真的想要一个答案，我不必在success函数内继续计算，因为我的实际问题涉及来自不同表的许多值。我还希望将来可以扩展计算，而不会让它太复杂。如果这是不可能的，那么，我将不得不忍受这一点。 ; - ）

**编辑2 **

好的，我们得到了答案：当然它在文档页面的顶部附近，： - /抱歉。 jQuery ajax调用中的async属性。 http://api.jquery.com/jQuery.ajax/

Answer 1

这是因为ajax默认情况下异步执行请求，并且在控件到达alert(price);之前，请求尚未执行且price仍保留旧值。

如果要同步执行，则可以将async设置为false。

$.ajax({
    async: false,
    .....
    .....
});

Answer 2

你需要在成功函数内部计算

function calculate_cost(){

var price = 0;
var size = $('form#tshirt_form [name="size"] option:selected').val();
$.ajax({
    url:'my_script.php',
    type:'post',
    data:'query=select price from tshirts.prices where size = "' + size + '"',
    success:function(data){
        if(isjson(data)){
            data = $.parseJSON(data);
            data = data[0];
            price = data['price'];
            //  continue code for calculation
            //  this alert will display "0", but I want the price from the database in there
            alert(price);
           //perhaps do other ajax calls for other bits of data
            //...
        }else{
            //display error getting data
        }
    }
});

// return final_price; this function wont be able to return a value
}

Answer 3

ajax是异步的，因此您应该重构代码，以便在回调中执行您需要执行的操作

$.ajax({
    url:'my_script.php',
    type:'post',
    data:'query=select price from tshirts.prices where size = "' + size + '"',
    success:function(data){
        if(isjson(data)){
            data = $.parseJSON(data);
            data = data[0];
            price = data['price'];
            //call another function (maybe make another ajax call) from here
            dosomethingwithprice(price);
        }else{
            //display error getting data
        }
    }
});

Answer 4

你的ajax代码需要时间来执行（尽管不多）;但是ajax调用之后的代码是异步执行的，很可能是在ajax调用的结果进入之前。

相反，为什么不尝试将警报（价格）移动到if(isjson(data))区域的主体中，然后执行回调函数，将价格返回到您需要使用的其他任何实用程序？

Answer 5

你必须在回调堆栈中进行计算。 Ajax工作异步，这意味着，在回调函数启动之前，代码外部的回调函数运行。所以你应该在回调中进行计算。

function calculate_cost(){

    var price = 0;
    var size = $('form#tshirt_form [name="size"] option:selected').val();
    $.ajax({
        url:'my_script.php',
        type:'post',
        data:'query=select price from tshirts.prices where size = "' + size + '"',
        success:function(data){
            if(isjson(data)){
                data = $.parseJSON(data);
                data = data[0];
                price = data['price'];
            }else{
                //display error getting data
            }

    //  continue code for calculation
    //  this alert will display "0", but I want the price from the database in there
    alert(price);
    //perhaps do other ajax calls for other bits of data
    //...
         return final_price;
        }
    });

}

Answer 6

我建议让ajax调用返回一个延迟对象。然后，在完全计算最终价格时，使用该值解析延迟对象。

function calculate_cost() {
    var price = 0,
        size = $('#tshirt_form [name="size"] option:selected').val(),
        def = $.Deferred();

    $.ajax({
        data: {size:size},
        url: 'my_script.php',
        type: 'post',
        dataType: 'json',
    }).done(function(data){
        data = data[0];
        price = data['price'];
        def.resolve(price);
    }).fail(function(){
        // do on error stuff
    });

    return def.promise();
}
// ...
calculate_cost("large").done(function(price){
    alert(price);
}).fail(function(){
    alert("Failed to retrieve price");
});

用ajax实时更新javascript变量

6 个答案: