Web--使用Ajax与Hibernate完成表单异步校验

绝地灬酷狼 2021-08-13 19:32 314阅读 0赞

#### 前端页面： ####

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/signin.css" />
    <script type="text/javascript"> $(function() { //失去焦点触发事件 $("#userName").blur(function(){ var userNameInput = $(this).val(); $.post("${pageContext.request.contextPath }/checkUserName", { "userName": userNameInput}, function(data) { var flag = data.flag; if(flag){ $("#errorInfo").html("用户名重复"); }else{ $("erroeInfo").html(""); } }, "json" ); }); }); </script>
    </head>
    <body>
    	<div class="container">
    
          <form class="form-signin">
            <h2 class="form-signin-heading">Please sign in</h2>
            <input type="text" id="userName" class="form-control" placeholder="用戶名" autofocus>
            <span id="errorInfo"></span>
            <input type="password" class="form-control" placeholder="密碼">
              <input type="checkbox" value="remember-me"> Remember me
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
    
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

#### 控制层 ####

package pers.zhang.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import pers.zhang.service.UserService;
    
    
    public class CheckUserNameServlet extends HttpServlet { 
    	private static final long serialVersionUID = 1L;
           
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		//获得用户名
    		String userName = request.getParameter("userName");
    		
    		//传递到service
    		UserService userService = new UserService();
    		boolean flag = userService.checkUserName(userName);
    		
    		String jsonStr = "{\"flag\":" + flag + "}";
    		response.getWriter().write(jsonStr);
    		
    	}
    
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		doGet(request, response);
    	}
    
    }

#### Service层： ####

public boolean checkUserName(String userName) { 
    	UserDao userDao = new UserDao();
    	User u = userDao.checkUserName(userName);
    	//存在返回true
    	return u == null ? false : true;
    }

#### Dao层： ####

public User checkUserName(String userName) { 
    	Session session = HibernateUtils.openSession();
    	Transaction tx = session.beginTransaction();
    
    	Criteria criteria = session.createCriteria(User.class);
    	criteria.add(Restrictions.eq("user_name", userName));
    	User u = (User) criteria.uniqueResult();
    	
    	tx.commit();
    	session.close();
    	return u;
    }

#### User表： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

#### 测试： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/8c079e706c2e41f99baffe7b3ff9ed9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/575bcaa9537c43e9a7e9156017c15957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]: /images/20210813/c2c812a36ebf450e95f974a7f42d0000.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 3]: /images/20210813/747a3e866ea9453fb8a7625774e041df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 4]: /images/20210813/4eb17484778b447e813ccdd1b081eed3.png