Javaweb使用Ajax异步请求实现注册功能

Javaweb使用Ajax异步请求实现注册功能_第1张图片

文章目录

    • regist.jsp
    • CheckUsernameServlet.java

当username获取焦点时,发送异步请求进行校验,获取服务器响应回来的数据,最后将信息显示到用户名输入框后面。
Javaweb使用Ajax异步请求实现注册功能_第2张图片


regist.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta 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();
	
			return xhr;
		}
		function checkUsername() {
			var username = document.getElementById("username").value;
			//发送异步请求进行校验
			var xhr = getXhr();
			//设置请求信息
			xhr.open("get","CheckUsernameServlet?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.jsp" method="post">
		用户名称:<input type="text" id="username" name="username" onblur="checkUsername();"><span id="regist_span"></span>
		<br>
		用户密码:<input type="password" name="password">
		<br>
		确认密码:<input type="password" name="repassword">
		<br>
		<input type="submit" value="注册">
	</form>

</body>
</html>

CheckUsernameServlet.java


package com.atguigu.login.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
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;


@WebServlet("/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 {
		
		doGet(request, response);
	}

}

JDBC操作部分代码:https://blog.csdn.net/qq_42145862/article/details/101145570

你可能感兴趣的:(JavaWeb)