ajax 输入框失去焦点时，验证输入框内容在数据库是否已存在

最新推荐文章于 2022-03-20 21:42:28 发布

原创最新推荐文章于 2022-03-20 21:42:28 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #数据库 #前端

本文介绍了如何在Web应用中通过Java编写代码，创建JS文件导入并使用数据库API，如MySQL。DBHelper类演示了如何连接到数据库，User和UserDao接口定义了实体及操作，而UserDaoImpl实现展示了具体的数据查询。最后，Servlet示例了如何通过Ajax从前端获取用户输入并调用后端查询功能。

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

需要在web下创建js文件并导入js，并且在lib下导入msql等包。

package util;

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

public class DBHelper {
    public static final String URL = "jdbc:mysql://127.0.0.1:3306/mydb";
    public static final String UNAME = "root";
    public static final String PWD = "root";
    private static Connection conn;
    /**
     * 获取数据库连接
     * @return 返回数据库连接对象
     */
    public static Connection getConn(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            try {
                conn = DriverManager. getConnection(URL,UNAME,PWD);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        return conn;
    }

    /**
     * 关闭数据库连接
     */
    public void close(){
        if(conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

}

package entity;

public class User {
    private int uid;
    private String uname;
    private String upwd;

    public User() {

    }

    public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getUpwd() {
        return upwd;
    }

    public void setUpwd(String upwd) {
        this.upwd = upwd;
    }

    public User(int uid) {
        this.uid = uid;
    }

    public User(int uid, String uname, String upwd) {
        this.uid = uid;
        this.uname = uname;
        this.upwd = upwd;
    }
}

package Dao;

import entity.User;

public interface UserDao {
    public User findName(String name);
}

package Dao;

import Dao.UserDao;
import entity.User;
import util.DBHelper;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class UserDaoImpl implements UserDao {

    @Override
    public User findName(String name) {
        User user =null;
        Connection conn = DBHelper.getConn();
        String sql = "select * from user where name=?";
        try {
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1,name);
            ResultSet rs = ps.executeQuery();
            if (rs.next()){
                user = new User();
                user.setUid(rs.getInt(1));
                user.setUname(rs.getString(2));
                user.setUpwd(rs.getString(3));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return user;
    }
}

package servlet;

import Dao.UserDao;
import Dao.UserDaoImpl;
import entity.User;

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;

@WebServlet("/findName")
public class FindNameServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        System.out.println("aaaaaa");
        String name = request.getParameter("name");
        UserDao userDao = new UserDaoImpl();
        System.out.println("------");
        User u = userDao.findName(name);
        if (u!=null){
            response.getWriter().write("1");
        }else {
            response.getWriter().write("2");
        }
    }

}

<%--
  Created by IntelliJ IDEA.
  User: 郭明磊
  Date: 2021/11/10
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <form action="#" method="post">
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
      $(function () {
        $("[name=userName]").blur(function () {
          $.ajax({
            type:"get",
            url:"findName?name="+$("[name='userName']").val(),
            dataType:"text",
            success:function(data) {
              if (data==1){
                $("#show").html("用户已存在！！！")
              }else {
                $("#show").html("用户名可用")
              }
            }
          });
        });
      });
    </script>
    账号<input type="text" name="userName"><span id="show"></span></br>
    密码<input type="password" name="password"></br>
    <input type="submit" value="提交">
  </form>
  </body>
</html>

MySQL数据库创建语句如下：

drop database if exists mydb;
create database mydb;
use mydb;
create table user(
uid int primary key auto_increment,
name varchar(50) not null,
upwd varchar(50) not null
);
insert into user values(null,'zhangsan','123456');
insert into user values(null,'李四','123456');
select*from user;