-1

我是 ajax 新手，我正在尝试通过在 JSP 中使用 Ajax 和 JavaScript 创建 gmail 类型的用户名可用性检查。

我的代码适用于用户名可用性检查，但当用户名不可用时，我无法停止表单提交。

为了检查用户名的可用性，我使用了 onkeyup() 来检查每个字符，但是为了防止表单提交，我在表单标签中使用了 onsubmit()。

对于执行流程检查，我在此代码中使用了警报语句：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" language="javascript">
function returnFunction(str)
{
    alert("1");
    var flag = new Boolean(false);
    usernameValidation(str);
    alert("2");
    function usernameValidation(str)
    {
        alert("3");
        var xmlHttpRequest;
        if(window.XMLHttpRequest)
        {
            alert("4");
            xmlHttpRequest = new XMLHttpRequest();
            alert("5");
        }
        else
        {
            alert("6");
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttpRequest.onreadystatechange = function()
        {
            alert("7");
            if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200)
            {
                alert("8");
                if(xmlHttpRequest.responseText=="available")
                {
                    flag=new Boolean(true);
                    alert("9 flag:"+flag);
                    document.getElementById("myDiv").innerHTML="username is available";
                }
                else
                {
                    flag=new Boolean(false);
                    alert("10 flag:"+flag);
                    document.getElementById("myDiv").innerHTML="username is already taken";
                }
            }
        };
        xmlHttpRequest.open("POST", "UsernameCheck", true);
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        
        xmlHttpRequest.send("uname="+str);
    };
    alert("before return flag is:"+flag);
    return flag;
};
    function formValidation(){
        if(returnFunction(document.f1.username.value))
            {
              alert("caught flage:true");
              return true;
            }
        else{
            alert("caught flage:false");
            return false;
        }
    }
</script>

</head>
<body>
<form method="post" action="register"  name="f1" onsubmit="return formValidation()">
    User Name:<div id="myDiv1"><input type="text" name="username" size="20" onkeyup="returnFunction(this.value)"></div>
            <span id="myDiv" style="color: red"></span>

            <input type="submit" value="register">
            </form>

</body>
</html>
4

4 回答 4

0 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" language="javascript">
function getXMLHttpRequest(){
      var xmlHttpReq = false;
      // to create XMLHttpRequest object in non-Microsoft browsers
      if (window.XMLHttpRequest) {
        xmlHttpReq = new XMLHttpRequest();
      } 
      else if (window.ActiveXObject) {
        try {
          // to create XMLHttpRequest object in later versions
          // of Internet Explorer
          xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (exp1) {
          try {
            // to create XMLHttpRequest object in older versions
            // of Internet Explorer
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (exp2) {
            xmlHttpReq = false;
          }
        }
      }
      return xmlHttpReq;
    };
    function usernameValidation(str)
    {
        if (str.length==0) 
        { 
            document.getElementById("uname").innerHTML="should not be empty";
            return false;
        }
        else if(str.length<=4)
        {
                document.getElementById("uname").innerHTML="need more than 4 charachers";
                return false;
        }
        else{
                var xmlHttpRequest = getXMLHttpRequest();
                xmlHttpRequest.onreadystatechange =function()
                {
                    if (xmlHttpRequest.readyState < 4 && xmlHttpRequest.readyState > 0)
                    {
                        document.getElementById("uname").innerHTML = "<img src='images/load.gif' alt='checking...' width=16 height=16/>";
                    }
                    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)
                    {
                        if(xmlHttpRequest.responseText=="available")
                        {
                            document.getElementById("uname").innerHTML = "<img src='images/ok.png' alt='username available' width=16 height=16/>";
                            document.getElementById("uname1").innerHTML = ".";
                        }
                        else
                        {
                            document.getElementById("uname").innerHTML = "username not available";
                        }
                    }
                };
                xmlHttpRequest.open("POST", "UsernameCheck", true);
                xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xmlHttpRequest.send("uname="+str);

            };
    };

function userSubmitValidation(){
    var msg = document.getElementById("uname1").innerHTML;  
    if(msg=='.'){
        return true;
    }
    else{
        return false;
    }
};

</script>

</head>
<body>

<form method="post" action="register"  name="f1"  onsubmit="return userSubmitValidation()">
    User Name:<div id="myDiv1"><input type="text" name="username" size="20" onkeyup="usernameValidation(this.value)" onblur="usernameValidation(this.value)"></div>
            <span id="uname" style="color: red"></span><span id="uname1" style="color: white"></span>

            <input type="submit" value="register">
            </form>

</body>
</html>
于 2012-12-16T17:11:20.730 回答
0

Ajax 是异步的，因此您对 returnFunction 的调用不需要返回正确的标志，它将始终返回 false，因为很可能只有在方法完成（onresponse）后才会触发成功函数。因此，您需要确保使用布尔值接收 Ajax cal 的响应completed，并不断检查它直到它为真。 

<script type="text/javascript" language="javascript">
function returnFunction(str)
{
alert("1");
var flag = new Boolean(false);
var completed = new Boolean(false);
usernameValidation(str);
alert("2");
function usernameValidation(str)
{
    alert("3");
    var xmlHttpRequest;
    if(window.XMLHttpRequest)
    {
        alert("4");
        xmlHttpRequest = new XMLHttpRequest();
        alert("5");
    }
    else
    {
        alert("6");
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpRequest.onreadystatechange = function()
    {
        alert("7");
        if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200)
        {
            alert("8");
            if(xmlHttpRequest.responseText=="available")
            {
                flag=new Boolean(true);
                alert("9 flag:"+flag);
                document.getElementById("myDiv").innerHTML="username is available";
            }
            else
            {
                flag=new Boolean(false);
                alert("10 flag:"+flag);
                document.getElementById("myDiv").innerHTML="username is already taken";
            }
        }
    };
    xmlHttpRequest.open("POST", "UsernameCheck", true);
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        
    xmlHttpRequest.send("uname="+str);
};
alert("before return flag is:"+flag);
return flag;
};
function formValidation(){
   returnFunction(username);
   while(!completed) {
   //wait for ajax response
   }
   if(flag)
        {
          alert("caught flage:true");
          return true;
        }
    else{
        alert("caught flage:false");
        return false;
    }
}
 </script>
于 2012-12-15T09:35:42.853 回答
0 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" language="javascript">

var flag = new Boolean(false);
function returnFunction(str)
{
alert("1");

usernameValidation(str);
alert("2");
function usernameValidation(str)
{
    alert("3");
    var xmlHttpRequest;
    if(window.XMLHttpRequest)
    {
        alert("4");
        xmlHttpRequest = new XMLHttpRequest();
        alert("5");
    }
    else
    {
        alert("6");
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpRequest.onreadystatechange = function()
    {
        alert("7");
        if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200)
        {
            alert("8");
            if(xmlHttpRequest.responseText=="available")
            {
                flag=new Boolean(true);
                alert("9 flag:"+flag);
                document.getElementById("myDiv").innerHTML="username is available";
            }
            else
            {
                flag=new Boolean(false);
                alert("10 flag:"+flag);
                document.getElementById("myDiv").innerHTML="username is already taken";
            }
        }
    };
    xmlHttpRequest.open("POST", "UsernameCheck", true);
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        
    xmlHttpRequest.send("uname="+str);
};
alert("before return flag is:"+flag);
return flag;
};
function formValidation(){
    if(returnFunction(document.f1.username.value))
        {
          alert("caught flage:true");
          document.f1.submit();

        }
    else{
        alert("caught flage:false");
        alert("Username chossen by u is already taken.Please choose different Username");
    }
}
</script>

</head>
<body>
<form method="post" action="register"  name="f1" >
User Name:<div id="myDiv1"><input type="text" name="username" size="20"         onkeyup="returnFunction(this.value)"></div>
        <span id="myDiv" style="color: red"></span>

        <input type="submit" value="register">
        </form>
</body> 
</html>

进行这样的更改它将起作用。如果有任何问题请告知。

于 2012-12-15T09:57:38.687 回答
0

我也是 ajax 的新手，我正在尝试做和你一样的事情。我已经使用 ajax 和 jsp 成功检查了用户名的可用性。然后我坚持的事情即使用户名不可用，点击提交按钮后页面仍然提交。然后我用javascript来解决这个问题。我将返回的文本与之前声明的另一个文本进行了比较。如果检查成功，那么它将转到下一页，否则不会。有关详细信息，请查看此页面->“基于 Ajax 的用户名可用性检查，然后生成一些用户名以在 jsp 中使用”。查看 sample.jsp 代码。在该代码中，ai 在名为“conditions()”的函数中进行了检查。在该函数中，变量“checkvalue”保存了由可用性检查生成的返回文本。然后我将其与文本“可用”进行比较。如果匹配，则页面将提交其他明智的不。我不确定这是你想知道的，如果是，那么我的回答是否对你有帮助。谢谢你，祝你好运..

于 2013-01-04T20:08:03.107 回答