-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">

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 は非同期であるため、 returnFunction への呼び出しは正しいフラグを返す必要はありません。ほとんどの場合、メソッドが完了した後 (onresponse) にのみ成功関数がトリガーされるため、常に false が返されます。したがって、Ajax cal の応答がcompletedブール値を使用して受信されるようにし、それが true になるまで継続的にチェックする必要があります。 

<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

i am new at ajax too and i am kind of trying to do the same thing as you are doing. I have successfully checked the username availability using ajax and jsp. Then the thing i stuck at that even if a username is not available the page still submit after clicking submit button. Then I used javascript to solve this problem. I compared the returned text with another text declared before. If check successful then it will go to next page otherwise not. For details please check this page->"Ajax based username availablity checking and then generating some username to use in jsp". sample.jsp コードを確認してください。そのコードでは、ai は "conditions()" という名前の関数でチェック部分を実行しました。その関数では、変数 "checkvalue" は、可用性チェックによって生成された返されたテキストを保持します。次に、iそれを「利用可能」というテキストと比較してください. 一致する場合, ページはそうでなければ送信されます. これがあなたが知りたかったことかどうかわかりません. もしそうなら, 私の答えがあなたに役立つかどうか. ありがとう、頑張ってください..

于 2013-01-04T20:08:03.107 に答える
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 に答える