Ajax+Json+JdbcTemplate+Druid 异步校验用户名是否存在【JAVAEE基础】

异步校验用户名是否存在小项目

大体步骤:
1.前段页面(06-regist.html)发送ajax(Json格式 {username:username} )给后台Servlet(FindUserServlet)
2.后台(FindUserServlet)通过request获取Json中的username并使用dao(UserDao)层中的isExist()进行数据库判断
3.isExist()方法利用JdbcTemplate(queryForList方法)获取数据库中所有的user的名字封装进list,遍历list集合中的map进行判断,返回boolean值。
4.最终根据boolean值显示到前台页面中。

细节注意:

  • 服务器响应的数据,在客户端使用的时候,要想当作json使用
    1.在客户端设置:
    $.get(type):最后一个参数type指定为"json".
  • 在服务器端设置MIME类型
    response.setContentType(“application/json;charset=UTF-8”);

实现效果:
success
5

上代码:

前台页面 06-regist.html (Jquery的Ajax+Json)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            //给username 绑定blur 失去焦点事件
            $("#username").blur(function () {
                //获取username文本输入框的值
                var username=$(this).val();
                //发送ajax请求
                //期望服务器返回的格式
                    //{"userExist":true,"msg":"此用户名太受欢迎,请更换一个"}
                    //{"userExist":false,"msg":"用户名可用"}
                $.get("findUserServlet",{username:username},function (data) {
                    //判断uerExist键的值是否是true
                    var span=$("#s_username");
                    if (data.userExist){
                        //用户名已存在
                        span.css("color","red");
                        span.html(data.msg);
                    } else {
                        //用户名不存在
                        span.css("color","green");
                        span.html(data.msg);
                    }

                },"json");//json   设置收到的相应数据格式
            });

        })
    </script>
</head>
<body>
    <form>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span>
        <br>
        <input type="password" id="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"><br>
    </form>
</body>
</html>

后台FindUserServlet

package com.chif.servlet;

import com.chif.dao.UserDao;
import com.fasterxml.jackson.databind.ObjectMapper;

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.util.HashMap;
import java.util.Map;

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    private static UserDao dao=new UserDao();
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置相应的数据格式为json
        response.setContentType("application/json;charset=UTF-8");
        //获取用户名
        String username = request.getParameter("username");

        Map<String,Object> map=new HashMap<String, Object>();
        boolean exist = dao.isExist(username);
        //调用service层判断用户名是否存在---->查询数据库
        if (exist){
            //存在
            map.put("userExist",true);
            map.put("msg","此用户名太受欢迎,请更换一个");
        } else {
            //不存在
            map.put("userExist",false);
            map.put("msg","用户名可用");
        }

        //map转为json,
        ObjectMapper mapper=new ObjectMapper();
        //并且传递给客户端
        mapper.writeValue(response.getWriter(),map);


        //服务器返回的格式
               //{"userExist":true,"msg":"此用户名太受欢迎,请更换一个"}
               //{"userExist":false,"msg":"用户名可用"}


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

Dao层 UserDao

package com.chif.dao;

import com.chif.utils.JDBCUtils;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;
import java.util.Map;

public class UserDao {
    private static JdbcTemplate template=new JdbcTemplate(JDBCUtils.getDataSource());
    public boolean isExist(String username){
        String sql="select username from t_user";
        List<Map<String, Object>> mapList = template.queryForList(sql);
        for (Map<String, Object> map:mapList){
            for (Object existname:map.values()){
                if (username.equals(existname)){
                    return true;
                }
            }
        }
        return false;
    }


}

Dao层中的Druid的工具类JDBCUtils和Druid的配置文件
JDBCUtils

package com.chif.utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

/**
 * Druid连接池的工具类
 */
public class JDBCUtils {
    //定义成员变量DataSource
    private static DataSource ds;

    //初始化DataSource
    static {
        try {
            //1.加载配置文件
            Properties pro=new Properties();
            pro.load(JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties"));
            //2.获取DataSource
            ds = DruidDataSourceFactory.createDataSource(pro);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    /*
      获取连接
     */
    public static Connection getConnection() throws SQLException {
        return ds.getConnection();
    }

    /*
      释放资源
     */
    public static void close(Statement stmt,Connection conn){
//        if (stmt!=null){
//            try {
//                stmt.close();
//            } catch (SQLException e) {
//                e.printStackTrace();
//            }
//        }if (conn!=null){
//            try {
//                conn.close();
//            } catch (SQLException e) {
//                e.printStackTrace();
//            }
//        }
        close(null,stmt,conn);

    }

    public static void close(ResultSet rs,Statement stmt, Connection conn){
        if (rs!=null){
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (stmt!=null){
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }if (conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

    }


    /*
      获取连接池
     */
    public static DataSource getDataSource() {
        return ds;
    }


}

druid.properties

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql:///test
username=root
password=105105
# 初始化连接数量
initialSize=5
# 最大连接数
maxActive=10
# 最大等待时间
maxWait=3000

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值