Question

我有一个简单的html页面用于登录。 html看起来像，

<form action="createUsers.html" method="post" onsubmit="return loginValidation();">

我正在使用ajax。如果用户不可用，它将在登录页面中显示错误消息。否则它会将用户导航到createUsers.html页面。 javascript文件看起来像是，它将调用servlet，

if((document.getElementById("user").value !="")&& (document.getElementById("pass").value != "")){
        var params = "&user=" + uname + "&pass=" + upwd;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)    
        {           
            var result = xmlhttp.responseText;           
            }
          }

        xmlhttp.open("POST","login",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(params);
        alert(result)
             if(result=="success"){
                  return true; 
              }
              else if(result=="failure") {
              document.getElementById("errormsg").innerHTML=xmlhttp.responseText;
              return false;
              }
    }

此ajax调用将检查数据库中的用户，如果用户可用，它将返回成功。

问题是，即使result的值是成功的，代码也总是调用else if语句。甚至警报声明也显示为成功。我不确定为什么不比较结果==“成功”声明？

Answer 1

AJAX默认是异步调用... 您的回调函数实际上是通过onreadystatechange将值（true / false）返回给xmlHttp对象，而不是返回与HTML窗口DOM对象关联的验证函数。您的验证功能只是返回true表单提交事件，这就是为什么你无论如何都要导航/提交到下一页... 你应该在成功结果中从你的回调函数本身调用form.submit，你只需要在你的回调中检索表单元素对象。并添加＆＃34;返回false＆＃34;在＆＃39; onSubmit＆＃39;避免表单自动提交。希望你能理解这个问题。

Answer 2

if ((document.getElementById("user").value != "") && (document.getElementById("pass").value != "")) {
    var params = "&user=" + uname + "&pass=" + upwd;

    // declare it here
    var result;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // accessing to parent scope`s variable
            result = xmlhttp.responseText;
            callback(result);
        }
    }

    xmlhttp.open("POST", "login", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(params);

   function callback (data){
     var result = data;
     alert(result)
    if (result == "success") {
        return true;
    }
    else if (result == "failure") {
        document.getElementById("errormsg").innerHTML = xmlhttp.responseText;
        return false;
    }
   }

}

Answer 3

您的回调函数实际上是将值（true / false）返回到onreadystatechange而不是您的验证函数。您的验证功能只是返回true表单提交事件，这就是为什么你无论如何都要导航/提交到下一页... 你应该在成功结果中从你的回调函数本身调用form.submit，你只需要在你的回调中检索表单元素对象。并添加＆＃34;返回false＆＃34;在＆＃39; onSubmit＆＃39;避免表单自动提交。希望你能理解这个问题。

使用xmlHttpRequest进行登录表单验证

3 个答案: