用ajax实时更新javascript变量
我有一个需要进行数值计算的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/
这是因为默认情况下ajax异步执行请求，然后控制达到alert(price); 请求尚未执行且price仍保留旧值。
如果要同步执行它，则可以将async设置为false。
$.ajax({ async: false, ..... ..... });
你需要在成功函数里面计算
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 }
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 } } });
你的ajax代码需要时间来执行（尽管不多）; 但是，ajax调用之后的代码是异步执行的，并且很可能在ajax调用的结果进入之前。
相反，为什么不尝试将警报（价格）移动到if(isjson(data))区域的主体中，然后执行回调函数，该函数将价格返回到您需要使用的其他任何实用程序？
你必须在回调堆栈中进行计算。 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; } }); }
我建议让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"); });