异步校验用户名是否存在小项目
大体步骤:
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”);
实现效果:
上代码:
前台页面 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