为什么这个 AJAX/Javascript 函数在第二次调用之前不能正常工作？答案

【问题标题】：Why does this AJAX/Javascript function not work properly until the second time its called?为什么这个 AJAX/Javascript 函数在第二次调用之前不能正常工作？
【发布时间】：2019-06-29 04:42:10
【问题描述】：

我一直在尝试解决 AJAX 请求，目前正在为 Javascript 中的 twitter-bootstrap 向导实现一些服务器端验证。我遇到了一些奇怪的行为，其中函数第一次执行失败，但第二次按预期工作。我已将代码简化为这种结构：

function do_ajax_validate($user,$email) {
    $.ajax({url: "checkuser.php?field=username&query=" + $user, success: function(result){
        if (result != 'Valid')
            {
                $("#userlabel").html(result);
                $("#userdiv").addClass("has-error");
                $("#userdiv").removeClass("has-success");
                $("#username").focus();
                is_good[0] = false;

            } else {
                $("#userlabel").html($user + " is available!");
                $("#userdiv").removeClass("has-error");
                $("#userdiv").addClass("has-success");
                is_good[0] = true;
                console.log(is_good[0]);

            }
    }});

    console.log(is_good[0]);    

    $.ajax({url: "checkuser.php?field=email&query=" + $email, success: function(result){
        if (result != 'Valid')
            {
                $("#emaillabel").html(result);
                $("#emaildiv").addClass("has-error");
                $("#emaildiv").removeClass("has-success")
                $("#email").focus()
                is_good[1] = false;

            } else {
                $("#emaillabel").html('Looks good!');
                $("#emaildiv").removeClass("has-error");
                $("#emaildiv").addClass("has-success")
                is_good[1] = true;
            }
    }});

    console.log(is_good[0]);
    console.log(is_good[1]);
    if ((is_good[0])&&(is_good[1])) {
        return true;
    }  else {
        return false;
    }
}

每当我进入控制台并尝试运行该函数时，我都会使用我知道可用的用户/电子邮件调用它并获得以下输出：

do_ajax_validate('available_username', 'available@email.address');
false
false
false

每当我运行完全相同的行时，我都会得到以下输出：

do_ajax_validate('available_username', 'available@email.address');
true
true
true

然后检查我知道的用户名/电子邮件，它返回最后的值：

do_ajax_validate('taken_username', 'taken@email.address');
true
true
true

而且（你猜对了）——再次执行该函数会返回预期结果：

do_ajax_validate('available_username', 'available@email.address');
false
false
false

我已经尝试了几个小时不同的方法，并得到了同样奇怪的结果。我做错了什么？

【问题讨论】：

标签： javascript ajax validation

【解决方案1】：

Ajax 调用在 javascript 中异步运行。您的success 回调只会在Ajax 调用返回后执行，因此您的console.log()s 可以在success 函数执行之前调用。

【讨论】：

【解决方案2】：

对于这个问题，你可以有两种解决方案：

在分配给成功属性的回调中处理结果。尝试在成功属性下控制台结果
在 AJAX 调用下使用 async: false，例如：

$.ajax({ url: "checkuser.php?field=username&query=" + $user, 异步：假，成功：函数（结果）{ console.log("结果") } });

【讨论】：