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

最新推荐文章于 2021-08-05 19:10:26 发布

步步经心

最新推荐文章于 2021-08-05 19:10:26 发布

阅读量891

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax

本文链接：https://blog.youkuaiyun.com/wangleizone/article/details/21789631

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于Java的员工信息管理系统的设计与实现过程。系统包括员工数据录入、验证用户名唯一性等功能，并通过JSP和Servlet进行前后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>";
			// 获得username
			var username = document.getElementById("username").value;
    		
			//得到浏览器中可以发送http request的对象，不同浏览器获得方式不同
			if(window.ActiveXObject){//IE
				req=new ActiveXObject("Microsoft.XMLHttp");
			}else if(window.XMLHttpRequest){//非IE
				req=new XMLHttpRequest();
			}
			// open
 			req.open("get", "<%=path%>/emp.do?f=3&username="+username);

 			// 事件监听
			req.onreadystatechange = handleRequest;
			// 发送信息,get方式发送null
			req.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();
	}