用Ajax实现的验证用户名是否重复实例
编程技术 / houtizong 发布于 3年前 76
- 1. userReg.jsp
<%@ 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>密 码</td> <td><input type="password" name="user.password" id="password" size="21"></td> </tr> <tr> <td class=table-lable_title>性 别</td> <td><select name="user.sex" style="width:50px"> <option value="1"> 男 </option> <option value="0"> 女 </option> </select> </td> <td class=table-lable_title>省 份</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>城 市</td> <td><select name="user.cityId" id="city"> <option value="">请选择城市...</option> </select> </td> <td class=table-lable_title>电 话</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
public class UserAction{ private UserService userService; public void setUserService(UserService userService){ this.userService=userService; } public void checkUser(){ HttpServletResponse response=ServletActionContext.getResponse(); boolean flag=userService.isExistUser(user.getUsername()); try{ PrintWriter pw=response.getWriter(); pw.print(flag); pw.close(); }catch(IOException e){ } }} 请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
