用Ajax实现的验证用户名是否重复实例

最新推荐文章于 2022-02-17 19:53:10 发布

最新推荐文章于 2022-02-17 19:53:10 发布 · 145 阅读

文章标签：

#javascript #java #ViewUI

本文介绍了一个用户添加页面的具体实现细节，包括使用Struts框架进行页面布局、通过DWR调用后台服务获取省份和城市列表、利用XMLHttpRequest对象检查用户名是否已存在等功能。此外，还展示了如何设置日期选择器及表单提交等操作。

<%@pagecontentType="text/html;charset=UTF-8"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<html>
<head>
<title>用户添加页面</title>
<scripttype="text/javascript"src="${path}/common/plugins/datepicker/WdatePicker.js"></script>
<scripttype="text/javascript"src="${path}/dwr/interface/place.js"></script>
<scripttype="text/javascript"src="${path}/dwr/engine.js"></script>
<scripttype="text/javascript"src="${path}/dwr/util.js"></script>
<script>
functiongetCity(){
varobj_pro=document.getElementById("province");
varobj_City=document.getElementById("city");
varpro_index=obj_pro.selectedIndex;
varpro_value=obj_pro.options[pro_index].value;
if(pro_value!=""&&pro_value!=null){
place.getCityList(pro_value,cityReturn);
}else{
DWRUtil.removeAllOptions(obj_City);
DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
}
}
functioncityReturn(data){
varobj_City=document.getElementById("city");
DWRUtil.removeAllOptions(obj_City);
DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
DWRUtil.addOptions(obj_City,data);
}
functioncurrentDate(){
varmyDate=newDate();
varyear=myDate.getFullYear();
varmonth=myDate.getMonth()+1;
varday=myDate.getDate();
varnow=year+"-"+month+"-"+day;
document.forms[0]['user.startDate'].value=now;
}
//创建XMLHTTPRequest对象
functiongetXMLHTTPRequest(){
varxmlHttp;
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();//非IE浏览器，用xmlhttprequest对象创建
}elseif(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//IE浏览器用activexobject对象创建
}
returnxmlHttp;
}
varhttp;
functioncheckUser(){
varusername=document.forms[0]['user.username'].value;
http=getXMLHTTPRequest();
varurl="${path}/user/checkUser.action?user.username="+username;
if(http){//成功创建XMLHTTPRequest对象
http.open("GET",url,true);　　//与服务端建立连接(请求方式post或get，地址,true表示异步)
http.onreadystatechange=callback;//指定回调函数　　
http.send(null);//发送请求
}
}
functioncallback(){
if(http.readyState==4){
if(http.status==200){
processResponse();
}
}
}
//处理服务器端响应
functionprocessResponse(){
vartext=http.responseText;
if(text=="true"){
document.getElementById("error").innerHTML="用户名已经存在";
}else{
document.getElementById("error").innerHTML="";
}
}
</script>
</head>
<body>
<formname="form"method="post"action="${path}/user/userSave.action">
<tablealign="center"class="table-form">
<tr>
<tdcolspan="4"class="table-title">添加用户信息</td>
</tr>
<tr>
<tdclass=table-lable_title>用户名</td>
<td><inputtype="text"name="user.username"onBlur="checkUser()"><spanid="error"style="color:red"></span></td>
<tdclass=table-lable_title>密  码</td>
<td><inputtype="password"name="user.password"id="password"size="21"></td>
</tr>
<tr>
<tdclass=table-lable_title>性  别</td>
<td><selectname="user.sex"style="width:50px">
<optionvalue="1"> 男 </option>
<optionvalue="0"> 女 </option>
</select>
</td>
<tdclass=table-lable_title>省  份</td>
<td><selectname="user.provinceId"id="province"onChange="getCity();">
<optionvalue="">请选择省份</option>
<s:iteratorvalue="provinceList">
<optionvalue="<s:propertyvalue="id"/>"><s:propertyvalue="provinceName"/></option>
</s:iterator>
</select>
</td>
</tr>
<tr>
<tdclass=table-lable_title>城  市</td>
<td><selectname="user.cityId"id="city">
<optionvalue="">请选择城市...</option>
</select>
</td>
<tdclass=table-lable_title>电  话</td>
<td><inputtype="text"name="user.telphone"id="telphone"size="20"></td>
</tr>
<tr>
<tdclass=table-lable_title>E-Mail</td>
<td><inputtype="text"name="user.email"id="email"size="20"></td>
<tdclass=table-lable_title>添加日期</td>
<td>
<inputtype="text"name="user.startDate"class="Wdate"value=""onmouseover="currentDate();"onclick="newWdatePicker(this)"readonly>
</td>
</tr>
<tr>
<tdcolspan="4"class="table-button">
<inputtype="submit"value="提交">
<inputtype="reset"value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>用户添加页面</title>
<script type="text/javascript" src="${path}/common/plugins/datepicker/WdatePicker.js"></script>
<script type="text/javascript" src="${path}/dwr/interface/place.js"></script>
<script type="text/javascript" src="${path}/dwr/engine.js"></script>
<script type="text/javascript" src="${path}/dwr/util.js"></script>
<script>

  function getCity(){
   var obj_pro=document.getElementById("province");
   var obj_City = document.getElementById("city");
   var pro_index=obj_pro.selectedIndex;
   var pro_value=obj_pro.options[pro_index].value;
    
  
  if(pro_value!=""&&pro_value!=null){
     
     place.getCityList(pro_value,cityReturn);
   
   }else{
     
     DWRUtil.removeAllOptions(obj_City);
     DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
   }
   
  }
 
 
 function cityReturn(data){
   
     var obj_City = document.getElementById("city");
     DWRUtil.removeAllOptions(obj_City);
     DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
	 DWRUtil.addOptions(obj_City,data);
 } 
 
 function currentDate(){
    var myDate=new Date();
    var year=myDate.getFullYear();
    var month=myDate.getMonth()+1;
    var day=myDate.getDate();
    var now=year+"-"+month+"-"+day;
    document.forms[0]['user.startDate'].value=now;
 }
 
  // 创建XMLHTTPRequest对象
 function getXMLHTTPRequest(){
     var xmlHttp;
     if(window.XMLHttpRequest){
         xmlHttp=new XMLHttpRequest();  //非IE浏览器，用xmlhttprequest对象创建
      }else if(window.ActiveXObject){
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  //IE浏览器用activexobject对象创建
      }
     
    return xmlHttp;
 
 }
 
 var http;
 function checkUser(){
    var username=document.forms[0]['user.username'].value;
    http=getXMLHTTPRequest();
    var url="${path}/user/checkUser.action?user.username="+username;
    if(http){  //成功创建XMLHTTPRequest对象
      http.open("GET",url,true); 　　//与服务端建立连接(请求方式post或get，地址,true表示异步)
      http.onreadystatechange=callback;  //指定回调函数　　 
      http.send(null);  //发送请求
    }
    
    
 }
 
 function callback(){
   if(http.readyState==4){
     if(http.status==200){
        processResponse();
     }
   
   }
  
 }
 //处理服务器端响应
 function processResponse(){
    var text=http.responseText;
    if(text=="true"){
        document.getElementById("error").innerHTML="用户名已经存在";
     }else{
        document.getElementById("error").innerHTML="";
     }
 }
 
 
 
</script>
</head>
<body>

<form name="form" method="post" action="${path }/user/userSave.action">
 
<table  align="center" class="table-form" >
  <tr>
     <td colspan="4" class="table-title">添加用户信息</td>
  </tr>
  <tr>
     <td class=table-lable_title>用户名</td>
     <td><input type="text" name="user.username" onBlur="checkUser()"><span id="error" style="color:red"></span></td>
     <td class=table-lable_title>密&nbsp;&nbsp;码</td>
     <td><input type="password" name="user.password" id="password" size="21"></td>
  </tr>
  <tr>
     <td class=table-lable_title>性&nbsp;&nbsp;别</td>
     <td><select name="user.sex" style="width:50px">
          <option value="1">&nbsp;男&nbsp;</option>
          <option value="0">&nbsp;女&nbsp;</option>
         </select>
     </td>
     <td class=table-lable_title>省&nbsp;&nbsp;份</td>
     <td><select name="user.provinceId" id="province" onChange="getCity();">
         <option value="">请选择省份</option>
         <s:iterator value="provinceList">
         <option value="<s:property value="id"/>"><s:property value="provinceName"/></option>
         </s:iterator>
         </select>
     </td>
  </tr> 
  <tr>
     <td class=table-lable_title>城&nbsp;&nbsp;市</td>
     <td><select name="user.cityId" id="city">
       <option value="">请选择城市...</option>
       </select>
     </td>
     <td class=table-lable_title>电&nbsp;&nbsp;话</td>
     <td><input type="text" name="user.telphone" id="telphone" size="20"></td>
   </tr>
   <tr>
     <td class=table-lable_title>E-Mail</td>
     <td><input type="text" name="user.email" id="email" size="20"></td>
     <td class=table-lable_title>添加日期</td>
     <td>
      <input type="text" name="user.startDate" class="Wdate" value="" onmouseover="currentDate();" onclick="new WdatePicker(this)" readonly>
     </td>
   </tr>
   <tr>
      <td colspan="4" class="table-button">
	     <input type="submit" value="提交" >
		 <input type="reset"  value="重置" >
	  </td>
     </tr>
</table>
   
</form>      
</body>
</html>

2. UserAction.java

Java代码