jQuery 與 AJAX 實現失去焦點驗證用戶名是否合格

 

JSP頁面

 

<tr
onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#f0f7ff'"
onmouseout="this.style.backgroundColor=currentcolor">
<td width="10%" class="main_matter_td">用戶名</td>
<td width="40%" align="left" class="main_matter_td">
<input name="nameLc" id="nameLc" type="text" class="textBox" value="" size="24" onblur="isExist(this.value)"/>
<div id="checkResult">*</div>
<td width="10%" class="main_matter_td">真實姓名</td>
<td width="40%" align="left" class="main_matter_td">
<input name="realnameLc" id="realnameLc" type="text" class="textBox" value="" size="24" onblur="isExist1(this.value)"/>
<div id="checkResult1">*</div>
</tr>

 

JSP頁面上調用AJAX方法 
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
//驗證用戶名是否存在
function isExist(nameLc){
var url_check = "aaaa.action?name="+nameLc;
$.ajax({
type: "POST",
url: url_check,
dataType: "text",
success: function(result){
if(result==1){
document.getElementById("checkResult").innerHTML="<font color=red>用戶已經存在請重新輸入！</font>";
}else if(result == 0){
document.getElementById("checkResult").innerHTML="<font color=red>用戶可以使用！</font>";
}else{
document.getElementById("checkResult").innerHTML="<font color=red>用戶不能為空！</font>";
}
}
});
}
</script>

 

action中 方法：

public String aaaa(){
int result = 0 ;
String name = get("name").toString();
name = name.replaceAll(" ", "");
System.out.println(" aaaa name-->"+name);
if("".equals(name)){
result = 2;
}else{
if(this.ocs.isExsitUserName(name)){
result = 1;
}else{
result = 0;
}
}

HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out = null;
response.setContentType("text/xml;charset=UTF-8");
try {
out = response.getWriter();
out.print(result);
System.out.println(result);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}

 

 

這里是JQUERY和AJAX方法合作實現異步驗證