обновить переменную javascript с помощью ajax в режиме реального времени

Question

У меня есть функция JavaScript, которая должна делать численные расчеты.Некоторые из чисел, используемых в этом расчете, хранятся в базе данных, и они будут отличаться в зависимости от того, как пользователь заполняет онлайн-форму.Как только пользователь заполняет форму, он нажимает кнопку РАСЧЕТ.В настоящее время в функции JS я хотел бы использовать ajax для получения значений из базы данных, которые соответствуют некоторому другому значению, выбранному пользователем.

Для простого примера: есть 3 размера t-рубашки, с разными ценами в зависимости от размера (хранятся в базе данных).Пользователь выбирает размер, и когда он нажимает кнопку CALCULATE, я использую ajax, чтобы получить цену, связанную с выбранным размером.

Вопрос в том, хочу ли я использовать ajax для обновления некоторых переменных, которые я буду использовать позжев сценарии.То, как я пытаюсь сделать это сейчас, не работает, переменная в скрипте не обновляется из ajax, я могу получить доступ только к значению из базы данных внутри функции success вызова ajax.Я понимаю, что это потому, что 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 в режиме реального времени ??

Большое спасибо!

** EDIT **

Спасибо всем за помощь, я понимаю, что ajax является асинхронным,Мне бы очень хотелось получить ответ, в котором мне не нужно продолжать вычисления внутри функции success, потому что моя настоящая проблема связана с множеством значений из нескольких разных таблиц.Я также хотел бы иметь возможность расширить расчет в будущем, не делая его слишком сложным.Если это невозможно, то мне придется с этим смириться.; -)

** РЕДАКТИРОВАТЬ 2 **

ОК, мы получили ответ: конечно, это почти вверху страницы документации: - / извините за это.Свойство async в вызове jQuery ajax.http://api.jquery.com/jQuery.ajax/

Answer 1

Это потому, что ajax выполняет запрос асинхронно по умолчанию и до того, как элемент управления достигнет alert(price);, запрос еще не выполнен и price по-прежнему содержит старое значение.

Если вы хотите выполнитьсинхронно, тогда вы можете установить async в ложь.

$.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 работает асинхронно, это означает, что коды вне функции обратного вызова выполняются до запуска функции обратного вызова. Таким образом, вы должны сделать свой расчет в обратном вызове.

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 4

Ваш ajax-код требует времени для выполнения (хотя и не очень);однако код после вызова ajax выполняется асинхронно и, скорее всего, до того, как поступят результаты вызова ajax.

Вместо этого, почему бы вам не попробовать переместить предупреждение (цену) в тело * 1003?* region, а затем выполните функцию обратного вызова, которая возвращает цену любой другой утилите, в которой вы хотите ее использовать?

Answer 5

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 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");
});