ajax连接数据库检测用户名是否存在-优快云博客

本文介绍了一个使用Ajax技术实现的用户名注册验证系统，通过前端实时检查用户名是否已存在，提高用户体验。

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

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax检测用户名</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="myform">
用户名：<input type="text" name="username" onblur="checkname();">
<span id="checkbox"></span>
<!--
这里用于在执行后显示结果的地方
-->
</form>
</body>
</html>

ajax.js

// JavaScript Document
var XHR; // 定义一个全局对象
function createXHR() { // 首先我们得创建一个XMLHttpRequest对象
	if (window.ActiveXObject) {// IE的低版本系类
		XHR = new ActiveXObject('Microsoft.XMLHTTP');// 之前IE垄断了整个浏览器市场，没遵循W3C标准，所以就有了这句代码。。。但IE6之后开始有所改观
	} else if (window.XMLHttpRequest) {// 非IE系列的浏览器，但包括IE7 IE8
		XHR = new XMLHttpRequest();
	}
}
function checkname() {
	var username = document.myform.username.value;
	createXHR();
	XHR.open("GET", "checkUser.jsp?username=" + username, true);// true:表示异步传输，而不等send()方法返回结果，这正是ajax的核心思想
	XHR.onreadystatechange = zhangshuang;// 当状态改变时，调用byhongfei这个方法，方法的内容我们另外定义
	XHR.send(null);
}
function zhangshuang() {
	if ((XHR.readyState == 4) || (XHR.status == 200)) {
		{
			var textHTML = XHR.responseText;
			document.getElementById('checkbox').innerHTML = textHTML;
		}
	}
}

DB_Conn.java

package com.db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DB_Conn {
    Connection conn;
    Statement st;
    public DB_Conn() {
        conn_init();
    }
    void conn_init() {
        setConnection();
        setStatement();
    }
    public void setConnection() {
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver");
            conn = DriverManager.getConnection(
					"jdbc:oracle:thin:@localhost:1521:orcl", "scott", "tiger");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
   
    public void setStatement() {
        try {
            st = conn.createStatement();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
   
    public boolean checkUser(String username) {
        String sql="select * from users where username='"+username+"'";
        ResultSet rs;
        try {
            rs = st.executeQuery(sql);
            if(rs.next())
            {
                conn.close();
                return true;
            }           
        } catch (SQLException e) {
            e.printStackTrace();
        }
        try {
            conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return false;
    }  
}

checkUser.jsp

<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import="com.db.DB_Conn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<title>checkUser</title> 
	</head>
	<body>
		<%
			String username = request.getParameter("username");
			DB_Conn db=new DB_Conn();
			if ("".equals(username)) {
				out.println("<font color=red>用户名不能为空！ </font>");
			} else if (username.length() < 4 || username.length() > 20) {
				out.println("<font color=red>用户名" + username
						+ "不合法！(长度为4到20位，且不能使用?#=等特殊字符) </font>");
			} else if (db.checkUser(username)) {
				out.println("<font color=red>用户名" + username + "已经存在！</font>");
			} else {
				out.println("<font color=green>用户名" + username
						+ "尚未存在，可以使用！</font>");
			}
		%>
	</body>
</html>