第一步：
導入jquery
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
第二步：
建個表單和輸入框
<body>
<form >
輸入用戶名：<input type="text" id="username" >
<span id = "usernameInfo"></span>
</form>
</body>
第三步：
寫JS代碼，blur（）方法
<script type="text/javascript"> $(function(){ $("#username").blur(function(){ //1、失去焦點，獲得輸入框的內容 var usernameInput = $(this).val(); //2、去服務端校驗該用戶名是否存在 $.post( "${pageContext.request.contextPath}/checkUsernameServlet", {"username":usernameInput}, function(data){ var isExist = data.isExist; //3、根據返回的isExist動態地顯示信息 var usernameInfo = ""; if(isExist){ //該用戶存在 usernameInfo = "該用戶名已經存在" }else{ usernameInfo = "該用戶名可以使用" } $("#usernameInfo").html(usernameInfo); }, "json" ); }); }); </script>
第四步：
在web層創建Servlet（我分為web,service,dao和domain，domain負責封裝，因為只有一個username參數，就沒用到domain）
以JSON格式返回isExist
public class CheckUsernameServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //獲得要校驗的用戶名 String username = request.getParameter("username"); //傳遞username到service UserService service = new UserService(); boolean isExist = false; try { isExist = service.checkUsername(username); } catch (SQLException e) { e.printStackTrace(); } response.getWriter().write("{\"isExist\":"+isExist+"}"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }
第五步：
創建Service
public class UserService { public boolean checkUsername(String username) throws SQLException { UserDao dao = new UserDao(); Long isExist = dao.checkUsername(username); return isExist>0?true:false; } }
第六步：
創建Dao（注：使用的是C3P0和DBUtils，所以要導入各種包和配置文件）
public class UserDao { public Long checkUsername(String username) throws SQLException { QueryRunner runner = new QueryRunner(C3P0Utils.getDataSource()); String sql = "select count(*) from user where username = ?"; Long query = (Long) runner.query(sql, new ScalarHandler(),username); return query; } }
第七步，代碼完成並測試
