目录

1.存放用户信息的数据库SQL

2.c3p0-config.xml配置文件

3.JDBCUtils数据库连接池工具类

4. 反序编程,  JDBC, 后台检查用户名是否在数据库中存在

5. 反序编程,  CheckService, 传递需要检测的数据

6. 反序编程,  编写并部署服务端, Servlet, 

7. 编写前台, HTML, jQuery, ajax

---

检测用户名是否已经被注册在用户注册页面，输入用户名，当用户名输入框失去焦点时，发送异步请求，将输入框
的用户名传递给服务器端进行是否存在的校验。

前台: html jQuery ajax
后台: Servlet JDBC  C3p0连接池 DBUtils  jackson
数据库: mysql

 

1.存放用户信息的数据库SQL

-- 创建user表
CREATE TABLE USER (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(32),
PASSWORD VARCHAR(32)
);
INSERT INTO USER VALUES(NULL,'zhangsan','123');
INSERT INTO USER VALUES(NULL,'lisi','123');
INSERT INTO USER VALUES(NULL,'wangwu','123');

 

2.c3p0-config.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
 <default-config>
  <property name="driverClass">com.mysql.jdbc.Driver</property>
  <property name="jdbcUrl">jdbc:mysql://localhost:3306/ajax_project</property>
  <property name="user">root</property>
  <property name="password">123</property>
 </default-config>
</c3p0-config>

 

3.JDBCUtils数据库连接池工具类

package com.lagou.util;

import com.mchange.v2.c3p0.ComboPooledDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;

/**
 *     通过该工具类可以获取连接对象和连接池对象
 */
public class JDBCUtils {
    //创建c3p0连接池
    private static DataSource dataSource = new ComboPooledDataSource();

    //提供一个方法  使用连接池
    public static DataSource  getDataSource(){
        return dataSource;
    }

    //提供一个Connection的连接对象
    public static Connection getConnection() throws SQLException {
        return dataSource.getConnection();
    }
}

 

4. 反序编程,  JDBC, 后台检查用户名是否在数据库中存在

package com.lagou.dao;

import com.lagou.util.JDBCUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class CheckDao {
    //检查用户名是否存在的方法
    public boolean daoCheck(String name) throws SQLException {

            //1.获取连接池DataSource对象
            DataSource dataSource = JDBCUtils.getDataSource();

            //2.使用DBUtils
            QueryRunner qr = new QueryRunner(dataSource);

            //3.查询操作
            Long count = (Long) qr.query("select count(*) from user where username = ? ", new ScalarHandler(), name);
            //4.如果查到了 count >=1
            return count >= 1;
    }
}

 

5. 反序编程,  CheckService, 传递需要检测的数据

package com.lagou.service;

import com.lagou.dao.CheckDao;

import java.sql.SQLException;

public class CheckService {
    //检查用户是否存在的check方法
    public boolean check(String name) throws SQLException {
        return new CheckDao().daoCheck(name);
    }
}

 

6. 反序编程,  编写并部署服务端, Servlet, 

package com.lagou.web;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.lagou.service.CheckService;

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 java.io.IOException;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/CheckServlet")
public class CheckServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        try {
            //1.设置编码
            req.setCharacterEncoding("UTF-8");
            resp.setContentType("text/html;charset=utf-8");

            //2.获取前台的参数 username
            String username = req.getParameter("username");

            //3.调用service的check方法得到一个boolean值
            boolean flag = new CheckService().check(username);

            //4.创建一个Map对象,给map中设置内容
            Map<String,Object> map = new HashMap<String ,Object>();

            if(flag){
                map.put("isExist",true);
                map.put("msg","该用户已经存在,请更换");
            }else{
                map.put("isExist",false);
                map.put("msg","该用户名可以使用");
            }

            //5.map转成json返回给前台.
            ObjectMapper om = new ObjectMapper();
            String mapJson = om.writeValueAsString(map);

            //6.json数据返回给前台
            resp.getWriter().println(mapJson);

        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

 

7. 编写前台, HTML, jQuery, ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        /*
        * 需求: 当用户名的输入框光标失去,发送ajax请求查询后台,判断用户是否已经存在,最后提示.
        * */
        $(function(){
            //1.给用户名的输入框派发blur事件
            $("#uid").blur(function(){
                //2.获取用户输入的用户名
                 var username = $("#uid").val()
                //3.发送ajax,传递用户名的参数
                //格式:  $.post(url,param,function(data){},"text/json")
                $.post("/ajax_project/CheckServlet",{"username":username},function(data){
                    //4.判断 isExist 如果为true, 用户存在, msg设置为红色,放到span中
                    if(data.isExist){
                        //不能使用
                        $("#uid_msg").css("color","red").html(data.msg);
                    }else{
                        //用户名可以使用
                        $("#uid_msg").css("color","green").html(data.msg);
                    }
                },"json")
            })
        })
    </script>
</head>
<body>
    <input type="text" name="username" id="uid" placeholder="请输入用户名" />
    <span id="uid_msg"></span>
    <br/>
    <input type="text" name="password" id="ipwd" placeholder="请输入密码" />
    <br/>
    <input type="submit" value="注册"/>
</body>
</html>