注册页面与用户名校验-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27906715/article/details/108120117

在这里插入图片描述

修改regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		span{
			color:red ;
		}
	
	</style>
	<script type="text/javascript">
		//获取xhr对象
		function getXhr(){
			var xhr = new XMLHttpRequest();
			alert(xhr) ;			
			return xhr ;
		}
	</script>
</head>
<body>
	<h1>欢迎注册</h1>
	<form action="regist" method="post">
		用户名称：<input type="text" name="username"/><span>${regist_msg }</span>
		<br/>
		用户密码：<input type="password" name="password"/>
		<br/>
		确认密码：<input type="password" name="repassword"/>
		<br/>
		<input type="submit" value="注册"/>
		
		</form>
		
		<input type="bytton" value="测试xhr对象" onclick="getXhr();"/>
</body>
</html>

在这里插入图片描述
修改regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		span{
			color:red ;
		}
	
	</style>
	<script type="text/javascript">
		//获取xhr对象
		function getXhr(){
			var xhr = new XMLHttpRequest();
			// alert(xhr) ;			
			return xhr ;
		}
		
		function checkUsername(){
			//获取用户输入的用户名
			var username = document.getElementById("username").value;
			//发送异步请求进行校验
			var xhr = getXhr();
			
			//设置请求信息
			xhr.open("get","checkUsername?username="+username,true);
			//发送请求
			xhr.send();
			//监听readyState的状态
			xhr.onreadystatechange=function(){	//匿名函数
				if(xhr.readyState == 4){	//响应处理完成
					if(xhr.status == 200){	//处理正确
						//获取服务端响应回来的数据
						var msg = xhr.responseText ;
					// 将信息设置到用户名输入框后面
						document.getElementById("regist_span").innerHTML=msg ;
					}
				}
			}
		}
	</script>
</head>
<body>
	<h1>欢迎注册</h1>
	<form action="regist" method="post">
		用户名称：<input type="text" id="username" name="username" onblur="checkUsername();"/><span id="regist_span">${regist_msg }</span>
		<br/>
		用户密码：<input type="password" name="password"/>
		<br/>
		确认密码：<input type="password" name="repassword"/>
		<br/>
		<input type="submit" value="注册"/>
		
		</form>
		
		<input type="bytton" value="测试xhr对象" onclick="getXhr();"/>
</body>
</html>

右键com.atguigu.login.servlet，新建Servlet
CheckUsernameServlet.java

package com.atguigu.login.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.atguigu.login.beans.User;
import com.atguigu.login.dao.UserDao;
import com.atguigu.login.dao.UserDaoImpl;

/**
 * Servlet implementation class CheckUsernameServlet
 */
public class CheckUsernameServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取到用户名
		String username = request.getParameter("username") ;
		
		UserDao userDao = new UserDaoImpl();
		
		User user = userDao.getUserByUsername(username) ;
		
		String msg="" ;
		if(user == null){
			//可用
			msg = "用户名可以使用" ;
		}else{
			//不可用
			msg = "已存在，请更换" ;
 		}
		
		response.setContentType("text/html;charset=utf-8");
		
		response.getWriter().println(msg) ;
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}

}

修改web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <servlet>
    <servlet-name>loginServlet</servlet-name>
    <servlet-class>com.atguigu.login.servlet.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>loginServlet</servlet-name>
    <url-pattern>/login</url-pattern>
  </servlet-mapping>
  <servlet>
    <servlet-name>RegistServlet</servlet-name>
    <servlet-class>com.atguigu.login.servlet.RegistServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RegistServlet</servlet-name>
    <url-pattern>/regist</url-pattern>
  </servlet-mapping>
  
  
  <servlet>
    <description></description>
    <display-name>CheckUsernameServlet</display-name>
    <servlet-name>CheckUsernameServlet</servlet-name>
    <servlet-class>com.atguigu.login.servlet.CheckUsernameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CheckUsernameServlet</servlet-name>
    <url-pattern>/checkUsername</url-pattern>
  </servlet-mapping>
</web-app>