项目的目录结构
源代码：
regservlet.java
package register;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class regservlet */@WebServlet("/regservlet")public class regservlet extends HttpServlet { ???private static final long serialVersionUID = 1L; ???/** ????* @see HttpServlet#HttpServlet() ????*/ ???public regservlet() { ???????super(); ???????// TODO Auto-generated constructor stub ???} ???/** ????* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse ????* ?????response) ????*/ ???protected void doGet(HttpServletRequest request, HttpServletResponse response) ???????????throws ServletException, IOException { ???????request.setCharacterEncoding("utf-8"); ???????response.setContentType("text/html;charset=utf-8"); ???????PrintWriter out = response.getWriter(); ???????// 获取用户名 ???????String name = request.getParameter("username"); ???????// 模拟数据库 ???????if ("张运涛".equals(name)) { ???????????// out.println("用户名已存在"); ???????????out.println("<font color=red>用户名已存在</font>"); ???????} else if (name.equals("")) { ???????????out.println("<font color=red>用户名不能为空</font>"); ???????} else { ???????????// out.println("用户名可以使用"); ???????????out.println("<font color=blue>用户名可以使用</font>"); ???????} ???????out.flush(); ???????out.close(); ???} ???/** ????* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse ????* ?????response) ????*/ ???protected void doPost(HttpServletRequest request, HttpServletResponse response) ???????????throws ServletException, IOException { ???????// TODO Auto-generated method stub ???????doGet(request, response); ???}}register.js
window.onload = function() { ???document.getElementById("username").onblur = function() { ???????// 获取<input type="text" name="username" value="" id="username"> ???????var username = document.getElementById("username").value; ???????// 1 ???????var xmlHttp = ajaxFunction(); ???????// 2 ???????xmlHttp.onreadystatechange = function() { ???????????if (xmlHttp.readyState == 4) { ???????????????if (xmlHttp.status == 200 || xmlHttp.status == 304) { ???????????????????var data = xmlHttp.responseText; ???????????????????document.getElementById("divcheck").innerHTML = data; ???????????????} ???????????} ???????} ???????// 3 ???????xmlHttp.open("post", "../regservlet?timeStamp=" + new Date().getTime(), ???????????????true); ???????xmlHttp.setRequestHeader("Content-Type", ???????????????"application/x-www-form-urlencoded"); ???????// 4 ???????xmlHttp.send("username=" + username); ???}}function ajaxFunction() { ???var xmlHttp; ???try { // Firefox, Opera 8.0+, Safari ???????xmlHttp = new XMLHttpRequest(); ???} catch (e) { ???????try {// Internet Explorer ???????????xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); ???????} catch (e) { ???????????try { ???????????????xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ???????????} catch (e) { ???????????} ???????} ???} ???return xmlHttp;}register.jsp
<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>校验用户名是否存在</title><script type="text/javascript" src="./register.js"> ???</script></head><body> ???<center> ???????<form action="" enctype="application/x-www-form-urlencoded"> ???????????<h3>请填写用户注册信息</h3> ???????????<table border="1"> ???????????????<tr> ???????????????????<td>用户名:</td> ???????????????????<td><input type="text" name="username" value="" id="username"> ???????????????????????<!-- ?用户名已存在显示在div 中 --> ???????????????????????<div id="divcheck"></div> ???????????????</tr> ???????????????<tr> ???????????????????<td>密码:</td> ???????????????????<td><input type="password" name="psw" value=""></td> ???????????????</tr> ???????????</table> ???????</form> ???</center></body></html>
运行截图：
完整源代码https://pan.baidu.com/s/1PSjQuU96emWL1UYYMKwlaA
ajax方式提交表单数据并判断当前注册用户是否存在
原文地址：https://www.cnblogs.com/zyt-bg/p/9903281.html