jquery - 为什么 post() 返回后不更新 DOM？观察到奇怪的计时问题

Question

下面的代码确实让我烦恼，我想也许 post() 函数需要阻塞。我是 jQuery(最新版本)和 AJAX 的新手，但我使用的是 ColdFusion，它会在数据变量中返回一些 HTML。

var dataResult;
var statusResult;
$.post('fh_result.cfm',$('#myform').serialize(),function(data,status){
     dataResult = data;
     statusResult = status;
});
//alert(statusResult);
if ('success' == statusResult)
{
    alert(statusResult);
    $('#result').html(dataResult);
}

当我取消注释第一个警报时，它返回“未定义”，但随后它进入 if block ，下一个警报框显示“成功”。如果我注释掉该行，它根本不会进入 if 语句。我的猜测是，我想将其设为阻塞调用或其他内容，因为我想在帖子之后将数据插入页面上。我在重新编写顶层代码时也遇到了问题，如下:

var dataResult;
var statusResult;
$.post('fh_result.cfm',$('#myform').serialize(),function(data,status){
     dataResult = data;
     statusResult = status;

     alert(statusResult);
     $('#result').html(dataResult);
});
//alert(statusResult);

现在在这种情况下，当我注释掉第二个警报框时，警报显示“成功”。当我取消注释时，我收到一个警报，表示成功，另一个警报表示未定义，但这次它根据需要使用回发结果更新 DOM。我怎样才能在没有警告框的情况下做到这一点？

Answer 1

您的.post() 异步运行。当它开始运行时，JavaScript 解释器会继续运行 post() 正文之外的 alert() 语句。由于 post() 是异步的，因此在调用 alert() 时几乎肯定不会完成，因此您的 statusResult 和 dataResult 变量可能是未定义的。只有在 post() success 回调中运行的代码才能保证按顺序运行。

您还可以尝试使用成功回调直接提供的变量，而不是将其分配给最初在 .post() block 外部定义的另一个变量。所以:

 $('#result').html(data);

...而不是数据结果。可能是转移注意力，但值得一试。