在JSP中使用Ajax進行用戶名可用性檢查並停止表單提交

-1

我是ajax的新手，我試圖通過在JSP中使用Ajax和JavaScript創建一個gmail類型的用戶名可用性檢查。在JSP中使用Ajax進行用戶名可用性檢查並停止表單提交

我的代碼適用於用戶名可用性檢查，但當用戶名不可用時，我無法停止表單提交。

用於檢查用戶名可用性我用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>

來源

2012-12-15 user1900771

你的ajax是否正常工作？ –

是的。它正在爲用戶名驗證工作，但是...即使在用戶名不可用時提交表單也不會停止。 – user1900771

通過使用另一個功能和另一個跨度解決了這個問題.... – user1900771

Ajax是異步的所以你要returnFunction通話，不必返回正確的標誌，它會返回false始終作爲最有可能成功的功能只有在方法完成後才能觸發（響應）。所以你需要確保使用一個completed布爾值來接收Ajax cal的響應，並不斷檢查它，直到它爲真。

<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-15 09:35:42 Subin

嗨subin ... thanx爲你的答覆。但我無法理解邏輯。我嘗試使用while（xmlHttpRequest.responseText！= null）{return flag;}但循環變成無限循環。我試着用if（xmlHttpRequest.responseText！= null）{return flag;}甚至它的null返回flag.instead沒有返回....你可以解釋清楚.plz thanx提前。 – user1900771

<%@ 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-15 09:57:38

thanx for u reply ...它怎麼能工作？該函數總是返回標誌爲false。那麼即使我們在formValidation（）中修改爲document.f1.submit（）;這在這裏並不方便...所以試試用其他方式.. – user1900771

<%@ 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-16 17:11:20 user1900771

它是工作程序.... – user1900771

我也是ajax的新手，我很想和你一樣做同樣的事情。我已經使用ajax和jsp成功檢查了用戶名可用性。然後，我堅持的事情，即使用戶名不可用，頁面仍然提交後點擊提交按鈕。然後我用javascript來解決這個問題。我將返回的文本與之前聲明的另一文本進行比較。如果檢查成功，則會轉到下一頁，否則不會。詳情請查看本頁 - >「Ajax based username availablity checking and then generating some username to use in jsp」。檢查sample.jsp代碼。在那個代碼中，我做了一個名爲「conditions（）」的函數中的檢查部分。在該函數中，變量「checkvalue」保存由可用性檢查生成的返回文本。然後我將它與文字「可用」進行比較。如果匹配，那麼頁面將提交其他不明智的。我不知道這是你想知道或不知道的，如果是，那麼我的答案可以幫助你。謝謝，祝你好運。

來源

2013-01-04 20:08:03

在JSP中使用Ajax進行用戶名可用性檢查並停止表單提交

回答

相關問題