ajax异步验证--实现注册页面的用户名检查

来源：互联网发布：淘宝翻译价格编辑：程序博客网时间：2024/05/21 07:15

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IT科技任务管理系统</title><link href="css/main.css" rel="stylesheet" type="text/css"><link href="css/index.css" rel="stylesheet" type="text/css"><style type="text/css"><!--body {margin-left: 30px;margin-top: 15px;margin-right: 15px;margin-bottom: 15px;background-attachment: fixed;background-image: url(admin/images/downbg.gif);background-repeat: no-repeat;background-position: right bottom;}--></style><script language="javascript">    var req;//XHR        function checkUser(){        // 获得标签label    var checkResult = document.getElementById("checkResult");           // 给标签赋值    checkResult.innerHTML = "<font color='red'>正在检测用户名</font>";// 获得usernamevar username = document.getElementById("username").value;    //得到浏览器中可以发送http request的对象，不同浏览器获得方式不同if(window.ActiveXObject){//IEreq=new ActiveXObject("Microsoft.XMLHttp");}else if(window.XMLHttpRequest){//非IEreq=new XMLHttpRequest();}// open req.open("get", "<%=path%>/emp.do?f=3&username="+username); // 事件监听req.onreadystatechange = handleRequest;// 发送信息,get方式发送nullreq.send(null);        }    // 事件监听程序    function handleRequest(){         // 继续获得标签对象     var checkResult = document.getElementById("checkResult");     //alert(req.readyState);    if (req.readyState == 4) {        if (req.status == 200) {    checkResult.innerHTML = "<font color='red'>"+req.responseText+ "</font>"; }else {    alert("有错: "+ req.status + ":" + req.statusText);}           }    }</script></head>    <body  onLoad="MM_preloadImages('images/down.gif','images/up.gif','images/view-chooseo.gif')"><p><span class="gray-bold-word"><form name="form1" action="<%=path %>/emp.do?f=2" method="post" >      <p>              </p>      <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">              <tr>                <td width="35"><img src="images/3toptop_01.gif" width="35" height="28"></td>                <td width="5"><img src="images/3toptop_02.gif" width="5" height="28"></td>                <td width="200" align="center" background="images/3toptop_03.gif" class="gray-bold-word"><a href="employee_add.jsp"><font color="black">员工信息修改</font></a></td>                <td width="5"><img src="images/3toptop_04.gif" width="5" height="28"></td>                <td width="20"><img src="images/3toptop_05.gif" width="20" height="28"></td>                <td background="images/3top_06.gif"> </td>                <td width="35"><img src="images/3toptop_07.gif" width="35" height="28"></td>              </tr>      </table><table width="90%" border="0" align="center" cellpadding="4" cellspacing="2" class="gray-bd3-2">              <tr>                <td colspan="4" align="center"> </td>              </tr>              <tr>                <td width="100" align="center" class="brightcyan-tb"> <font color="red">*</font> 用户名：</td>   <td><input name="username" id="username" type="text" class="big-input" maxlength="20" onblur="checkUser();"/><label id="checkResult"></label>                </td></tr><tr>               <td width="100" align="center" class="brightcyan-tb"><font color="red">*</font>  密码：</td>   <td><input name="password" type="password" class="big-input" maxlength="20"/>                </td></tr><tr>               <td width="100" align="center" class="brightcyan-tb">真实姓名：</td>   <td><input name="name" type="text" class="big-input" maxlength="20"/>          </td></tr>                <tr>                  <td align="center" class="brightcyan-tb">性别</td>                  <td><input type="radio" name="sex" value="1"/>                    男                      <input type="radio" name="sex" value="0" />                      女</td>                </tr>              <tr>               <td width="100" align="center" class="brightcyan-tb">出生日期：</td>   <td><input name="birthday" type="text" class="big-input" maxlength="20" onfocus="calendar()"/>           </td></tr>    <tr>        <td align="center" class="brightcyan-tb">学历</td>        <td colspan="3"><select name="qualification">          <option value="硕士">硕士</option>          <option value="本科">本科</option>          <option value="大专">大专</option>            </select></td></tr>          <tr>        <td align="center" class="brightcyan-tb">职位：</td>        <td colspan="3"><input type="text" name="position" /></td></tr>          <tr>                <td align="center" class="brightcyan-tb"> 工作经历： </td>                <td colspan="3"><textarea name="experience" class="superbig-textarea" style="width:90%"></textarea>                </td></tr> <tr>               <td width="100" align="center" class="brightcyan-tb">入职时间：</td>   <td><input name="hire_date" type="text" class="big-input" maxlength="20" onfocus="calendar()"/>              </td></tr><tr>    <td><div align="center" class="brightcyan-tb"><font color="red">*</font> 所属角色:</div></td>    <td><div align="left">      <select name="flag" class="big-input">        <option value="2">主管</option>        <option value="3">员工</option>      </select>    </div></td>  </tr></table>  <p align="center"><input name="Submit" type="submit" class="small-btn" value="提交"/>  </p><p align="center"> </p></form></body></html>

jsp页面提交至servlet处理

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {int f=Integer.parseInt(request.getParameter("f"));switch(f){    case 1:this.login(request, response);    break;    case 2: this.addEmp(request, response);break;    case 3:this.CheckUsername(request, response);    break;}}

public void CheckUsername(HttpServletRequest request, HttpServletResponse response) throws IOException{String username=request.getParameter("username");ApplicationContext ac=new ClassPathXmlApplicationContext("beans.xml");IEmpSerivce ies =(IEmpSerivce) ac.getBean("EmpServiceImpl");boolean result =ies.CheckUsername(username);System.out.println(result);response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();if(result){out.print("用户名已经存在");System.out.println("zunzai");}else{out.print("恭喜你，用户名可以使用");System.out.println("gongxi");}out.flush();out.close();}

0 0