Ajax 注册异步验证小例子

最新推荐文章于 2021-08-05 14:47:22 发布

Sundy_Xu

最新推荐文章于 2021-08-05 14:47:22 发布

阅读量953

点赞数

分类专栏： Java EE学习 Ajax

本文链接：https://blog.csdn.net/xuxian361/article/details/8137687

版权

Java EE学习同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

数据库表结构：

表中有一条记录：

项目结构：

register.jsp

<%@ 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 HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'register.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <script type="text/javascript">
  		var xmlHttp;
  		var flag;
  		function createXMLHttp()
  		{
  			if(window.XMLHttpRequest)
  			{
  				xmlHttp = new XMLHttpRequest();
  			}
  			else
  			{
  				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  			}
  		}
  		function checkUserId(userid)
  		{
  			createXMLHttp();
  			xmlHttp.open("POST", "CheckServlet?userid="+userid);
  			xmlHttp.onreadystatechange = checkUserIdCallback;
  			xmlHttp.send(null);
  			document.getElementById("msg").innerHTML = "正在发送...";
  			
  		}
  		function checkUserIdCallback()
  		{
  			if(xmlHttp.readyState == 4)
  			{
  				if(xmlHttp.status == 200)
  				{
  					var text = xmlHttp.responseText;
  					if(text == "true"){
  						flag = false;
  						document.getElementById("msg").innerHTML = "用户ID重复，无法使用!";
  					}
  					else
  					{
  						flag = true;
  						document.getElementById("msg").innerHTML = "此用户ID可以注册!";
  					}
  				}
  			}
  		}
  		function checkForm()
  		{
  			return flag;
  		}
  </script>
  
  <body>
    <form action="jsp/register.jsp" method="post" οnsubmit="checkForm()">
    	用户ID：<input type="text" name="userid" οnblur="checkUserId(this.value)"><span id="msg"></span><br>
    	姓  名：<input type="text" name="name"><br>
    	密  码：<input type="password" name="password"><br>
    	<input type="submit" value="注册">
    	<input type="reset" value="重置">	
    </form>
  </body>
</html>

CheckServlet.java

package com.xu.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

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

public class CheckServlet extends HttpServlet {

	public static final String DBDRIVER = "org.gjt.mm.mysql.Driver";
	public static final String DBURL = "jdbc:mysql://localhost:3306/mydb";
	public static final String DBUSER = "root";
	public static final String DBPASS = "root";
	
		
	private static final long serialVersionUID = 7502494116656742257L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doPost(request, response);
	}

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

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		PrintWriter out = response.getWriter();
		String userid = request.getParameter("userid");
		try
		{
			Class.forName(DBDRIVER);
			conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
			
			String sql = "SELECT COUNT(userid) FROM user WHERE userid = ?";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userid);
			rs = pstmt.executeQuery();
			if(rs.next())
			{
				if(rs.getInt(1)>0)
				{
					out.print("true");
				}else
				{
					out.print("false");
				}
			}
			out.close();
		
		}catch (Exception e) {
			e.printStackTrace();
			
		}finally
		{
			try
			{
				conn.close();
				
			}
			catch (Exception e) {
				e.printStackTrace();
			}
		}
		
	}

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>CheckServlet</servlet-name>
    <servlet-class>com.xu.servlets.CheckServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>CheckServlet</servlet-name>
    <url-pattern>/CheckServlet</url-pattern>
  </servlet-mapping>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

运行结果：