如何使函数等待jquery ajax完成

Question

我有一个登录表单，当用户单击提交按钮时，我有一个主函数，我调用它来决定页面是否应该迁移。在 main 函数中，我调用了另外两个函数：一个检查用户名和密码字段是否为空，第二个函数有一个 ajax 来检查用户名和密码的组合是否正确：问题是带有 ajax 的函数无法正常工作，因为主函数不会等待带有 ajax 的内部函数完成（异步）： 这是示例代码：

<h3 id="myerror" style="display:none;">Invalid username or password</h3>

<form action="mylogin.php" onSubmit="return mymain()">
username<input type="text" id="myuname">
password:<input type="password" id="mypass">
</form>

//and the script

<script>

function mymain() {
    if (is_not_empty() && is_in_database()) {
        return true;
    } else {
        return false;
    }
}

function is_not_empty() {
    var uname = $("#myuname").val();
    var pass = $("#mypass").val();
    if (uname == "" && pass == "") {
        $("#myerror").css("display", "block");
        return false;
    } else {
        return true;
    }
}

var a;

function isthere() {

    var uname = $("#myuname").val();
    var pass = $("#mypass").val();

    //the ajax php below returns either isthere or notthere with reference to the username 
    and password combination.

    $.post("http://localhost/passtester/pass1.php", {
        username: uname,
        password: pass
    }, function (feedbak) {
        a = feedbak;
    });
    if (a == "isthere") return true;
    if (a == "notthere") return false;
}
</script>

非常感谢您的帮助

Answer 1

您不能从异步方法返回值，而是需要使用回调方法，如

function mymain() {
    if (is_not_empty()) {
        is_in_database(function (isthere) {
            if (isthere) {
                $('form').submit();
            }
        })
    }
    return false;
}

function is_not_empty() {
    var uname = $("#myuname").val();
    var pass = $("#mypass").val();
    if (uname == "" && pass == "") {
        $("#myerror").css("display", "block");
        return false;
    } else {
        return true;
    }
}

function is_in_database(callback) {

    var uname = $("#myuname").val();
    var pass = $("#mypass").val();

    //the ajax php below returns either isthere or notthere with reference to the username     and password combination.

    $.post("http://localhost/passtester/pass1.php", {
        username: uname,
        password: pass
    }, function (feedbak) {
        callback(feedbak == "isthere")
    });
}

• How to return the response from an AJAX call?

Answer 2

使用成功函数

   $.ajax({

    success: function(data){

    },
    error: function(error){

    }
 });

Answer 3

您的问题在这部分：

$.post("http://localhost/passtester/pass1.php", {username:uname,password:pass}   
,function(feedbak)
{
   a=feedbak;
});
if(a=="isthere")
  return true;
if(a=="notthere")
  return false;
}

您的条件超出了回调函数的范围，将在处理 ajax 请求之前被调用：

应该是这样的：

$.post("http://localhost/passtester/pass1.php", {username:uname,password:pass}   
,function(feedbak)
{
  a=feedbak;

  if(a=="isthere")
     return true;
  if(a=="notthere")
     return false;
  }
});

更好的方法是在 jquery 中使用 $.ajax() 函数，而不是简写 $.post。这使您可以访问.success 和.error 事件。在这种情况下，您将使用您的 api 在登录成功时返回 200（.success）或在用户名/密码错误时返回 401（未经授权）或类似的东西。这样，您就可以轻松区分成功尝试和错误尝试。并直观地通知用户正在发生的事情

希望这会有所帮助。