如何在选择条件之前等待 JQUERY AJAX 响应

Posted 2023-02-22

【中文标题】如何在选择条件之前等待 JQUERY AJAX 响应

【英文标题】：How to wait for JQUERY AJAX response before choosing condition

【发布时间】：2011-08-17 14:34:57

【问题描述】：

$("#submit").click(function () 
    var boolError = false;

    CheckForm("#email");
    CheckPhone("#phone");

    if (boolError == true) 
        console.log('error');
     else 
        console.log('here');
        // $("#form").submit();
    
);

问题是它总是返回console.log('here');

有没有办法等待 CheckForm 和 CheckPhone。来自 CheckForm 函数的 AJAX 调用：

$.ajax(
    type: "POST",
    url: "/webservice/user.asmx/CheckForm",
    data: "'type':'" + var_type + "', 'value':'" + var_value + "'",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    error: function (XMLHttpRequest, textStatus, errorThrown)  ,
    success: function (data) 
        var obj = data.d;
    
);

【参考方案1】：

您必须在 ajax 调用的回调中执行此操作 - 如下所示：

$.ajax(
    type: "POST",
    url: "/webservice/user.asmx/CheckForm",
    data: "'type':'" + var_type + "', 'value':'" + var_value + "'",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    error: function (XMLHttpRequest, textStatus, errorThrown) 
      console.log('error');
    ,
    success: function (data) 
      console.log('here');
    
);

使用 AJAX 需要非线性编程——回调比比皆是。

您可以在 ajax 调用中设置选项使其不异步（即 jQuery 将等待它完成），但这会使您的应用程序/网站无法正常运行。

【讨论】：

正确。在编写 javascript 和 AJAX 时必须使用回调。

【参考方案2】：

尝试将async 设置为false：（请参阅下面的编辑）

$.ajax(
    type: "POST",
    async: false,
    url: "/webservice/user.asmx/CheckForm",
    data: "'type':'" + var_type + "', 'value':'" + var_value + "'",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    error: function (XMLHttpRequest, textStatus, errorThrown)  ,
    success: function (data) 
        var obj = data.d;
    
);

这将使 AJAX 调用阻塞，因此浏览器将等待它完成后再继续。当然，我仍然不确定这与在父条件中检查的布尔值有何关系。也许有些代码你没有给我们看......

---

编辑： :::sigh::: 当我发布这个答案时，我还年轻又愚蠢，实际上已经忘记了这一切。出于历史目的，我将上述信息保持不变（因为它似乎对某些人有所帮助，或者至少他们认为有所帮助），但请理解这不是正确的方法。

使异步调用同步并阻塞执行在各方面都是不正确的。不要这样做。相反，构建逻辑以响应异步操作。在这个问题的情况下，对 console.log() 的调用应该发生在 AJAX 调用的成功（或错误）处理程序中，而不是在调用该调用之后的代码中。

【参考方案3】：

是的，你把条件放在了成功函数中。

 success: function (data)  if (...)   else           

var obj = data.d;
    

【参考方案4】：

你在哪里设置boolError=true??这就是为什么它总是返回here；

你必须在 checkForm

中改变这样的逻辑

$.ajax(
    type: "POST",
    error: function (XMLHttpRequest, textStatus, errorThrown)  boolError==true;,
    success: function (data) 
        var obj = data.d;
    
);