需求分析：
在注册页面，输入用户名，当用户名输入框失去焦点时，使用Ajax发送异步请求，将输入框的用户名传递给服务端进行校验（查询数据库是否存在该用户名），客户端接收服务端响应结果，判断后提示相应信息。
代码示例：
- 注册页面（register.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<div>
<form action="#" method="post">
<table align="center">
<tr align="center">
<td colspan="2"><span>会员注册</span>USER REGISTER</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" id="username" name="username" >
<span id="usernameInfo"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" >
</td>
</tr>
<tr align="center">
<td colspan="2" ><input type="submit" value="注册"/></td>
</tr>
</table>
</form>
</div>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/getParameter.js"></script>
<script>
//jQuery的事件方法:失去焦点后值改变了时执行
$("#username").change(function () {
if(this.value===""){
$("#usernameInfo").html("")
return;
}
//请求的参数:填写的内容
var params="username="+this.value;
$.post("UserServlet",params,function (result) {
// alert(result)
if(result==="true"){
$("#usernameInfo").html("用户名已经注册了").css("color", "red");
}else{
$("#usernameInfo").html("用户名可用").css("color", "green");
}
},"text");
})
</script>
</body>
</html>
- 视图层（UserServlet）
@WebServlet(urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
UserService userService = new UserService();
boolean exist = userService.isExist(username);
response.getWriter().write(String.valueOf(exist));
// response.getWriter().print(exist);
// System.out.println(String.valueOf(exist));
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
- 业务逻辑层（UserService）
public class UserService {
private Userdao userdao=new Userdao();
//判断username是否已经存在。已经存在，返回true，否则返回false
public boolean isExist(String username){
User userByUsername = userdao.findUserByUserName(username);
return userByUsername!=null;
}
}
- 数据访问层（Userdao）
public class Userdao {
public User findUserByUserName(String username) {
Connection connection = null;
User user=null;
try {
connection = JDBCUtils.getConnection();
QueryRunner queryRunner = new QueryRunner();
String selectSql = "select * from t_user where username=?";
user = queryRunner.query(connection, selectSql, new BeanHandler<User>(User.class), username);
} catch (SQLException e) {
e.printStackTrace();
}finally {
JDBCUtils.closeResource(connection);
return user;
}
}
}
-
工具类（JDBCUtils）
public class JDBCUtils {
//使用Druid数据库连接池技术获取数据库连接
private static DataSource createDataSource;
static{
try {
Properties pros = new Properties();
// InputStream is = ClassLoader.getSystemClassLoader().getResourceAsStream("druid.properties");
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pros.load(is);
createDataSource = DruidDataSourceFactory.createDataSource(pros);
} catch (Exception e) {
e.printStackTrace();
}
}
public static Connection getConnection() throws SQLException {
return createDataSource.getConnection();
}
//使用dbutils.jar中提供的DbUtils工具类，实现资源的关闭
public static void closeResource(Connection conn, Statement ps, ResultSet rs){
DbUtils.closeQuietly(conn);
DbUtils.closeQuietly(ps);
DbUtils.closeQuietly(rs);
}
public static void closeResource(Connection conn){
DbUtils.closeQuietly(conn);
}
public static void closeResource(Connection conn,ResultSet rs){
DbUtils.closeQuietly(conn);
DbUtils.closeQuietly(rs);
}
}
- Druid数据库连接池配置文件（druid.properties）
url=jdbc:mysql:///stusmanager
username=root
password=root
driverClassName=com.mysql.jdbc.Driver
initialSize=10
maxActive=10
- 实体类（User）
public class User {
private int id;
private String username;
private String password;
public User() {
}
public User(int id, String username, String password) {
this.id = id;
this.username = username;
this.password = password;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
-
统一编码过滤器（EncodingFilter）
@WebFilter(urlPatterns = "/*")
public class EncodingFilter implements Filter {
@Override
public void destroy() {
}
@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) resp;
//统一解决乱码问题
//1.解决响应的中文乱码
response.setContentType("text/html;charset=utf-8");
//2.解决请求的中文乱码：post方式
if ("POST".equalsIgnoreCase(request.getMethod())) {
request.setCharacterEncoding("utf-8");
}
//3.放行请求
chain.doFilter(request, response);
}
@Override
public void init(FilterConfig config) throws ServletException {
}
}
数据库中以注册的用户名：
注册测试：
访问http://localhost:8080/test/register.html测试：
