ajax_03--通过请求确认用户名是否已经存在（使用jQuery）

1、jsp页面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 
 9 <!-- 导入JQuery的支持 -->
10 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
11 <script type="text/javascript">
12 
13     function checkUserName() {
14         //1. 获取输入框的内容
15         var name = $("#name").val();
16         
17         //2. 发送请求
18         $.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
19             //alert(data);
20             if(data == 1){//用户名存在
21                 //alert("用户名存在");
22                 $("#span01").html("<font color='red'>用户名已被注册</font>");
23             }else{
24                 //alert("用户名可用");
25                 $("#span01").html("<font color='green'>用户名可以使用</font>");
26             }
27         } );
28         //3. 输出响应的数据到页面上。
29     }
30     
31 </script>
32 </head>
33 <body>
34 <body>
35     <table border="1" width="500">
36         <tr>
37             <td>用户名:</td>
38             <td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
39         </tr>
40         <tr>
41             <td>密码</td>
42             <td><input type="text" name=""></td>
43         </tr>
44         <tr>
45             <td>邮箱</td>
46             <td><input type="text" name=""></td>
47         </tr>
48         <tr>
49             <td>简介</td>
50             <td><input type="text" name=""></td>
51         </tr>
52         <tr>
53             <td colspan="2"><input type="submit" value="注册"></td>
54         </tr>
55     </table>
56 </body>
57 
58 
59 </html>

关键点：input中使用onblur 当输入之后执行里面的方法，<span>标签用于提示标签被用来组合文档中的行内元素。$.post("url",参数{name:name}，function(data,status));之后通过判断data来确认是否是存在的用户名

2、后台java代码

servlet：

 1 package com.itheima.servlet;
 2 
 3 import java.io.IOException;
 4 import java.sql.SQLException;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 import com.itheima.dao.UserDao;
12 import com.itheima.dao.impl.UserDaomImpl;
13 
14 /**
15  * Servlet implementation class CheckUserNameServlet
16  */
17 public class CheckUserNameServlet extends HttpServlet {
18     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
19         try {
20             
21             request.setCharacterEncoding("UTF-8");
22             
23             //1. 检测是否存在
24             String name = request.getParameter("name");
25             System.out.println("name="+name);
26             
27             UserDao dao = new UserDaomImpl();
28             boolean isExist = dao.checkUserName(name);
29             
30             //2.  通知页面，到底有还是没有。
31             if(isExist){
32                 response.getWriter().println(1);  //存在用户名
33             }else{
34                 response.getWriter().println(2); //不存在该用户名
35             }
36             
37         } catch (SQLException e) {
38             e.printStackTrace();
39         }
40     }
41 
42     /**
43      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
44      */
45     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
46         // TODO Auto-generated method stub
47         doGet(request, response);
48     }
49 
50 }

数据库访问：

 1 package com.itheima.dao;
 2 
 3 import java.sql.SQLException;
 4 
 5 public interface UserDao {
 6 
 7     
 8     /**
 9      * 用于检测用户名是否存在
10      * @param username
11      * @return true : 存在 ，false : 不存在
12      */
13     boolean checkUserName(String username) throws SQLException;
14 }

 1 package com.itheima.dao.impl;
 2 
 3 import java.sql.SQLException;
 4 
 5 import org.apache.commons.dbutils.QueryRunner;
 6 import org.apache.commons.dbutils.handlers.ScalarHandler;
 7 
 8 import com.itheima.dao.UserDao;
 9 import com.itheima.util.JDBCUtil02;
10 
11 public class UserDaomImpl implements UserDao{
12 
13     @Override
14     public boolean checkUserName(String username) throws SQLException {
15         QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
16         
17         String sql = "select count(*) from e2_user where alias_name =?";
18         
19         
20         runner.query(sql, new  ScalarHandler(), username);
21         
22         Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 
23         return result > 0 ;
24     }
25 
26 }

数据库工具类：

 1 package com.itheima.util;
 2 
 3 import java.io.FileInputStream;
 4 import java.io.InputStream;
 5 import java.sql.Connection;
 6 import java.sql.DriverManager;
 7 import java.sql.ResultSet;
 8 import java.sql.SQLException;
 9 import java.sql.Statement;
10 import java.util.Properties;
11 
12 import javax.sql.DataSource;
13 
14 import com.mchange.v2.c3p0.ComboPooledDataSource;
15 
16 public class JDBCUtil02 {
17     
18     static ComboPooledDataSource dataSource = null;
19     static{
20         dataSource = new ComboPooledDataSource();
21     }
22     
23     public static DataSource getDataSource(){
24         return dataSource;
25     }
26     
27     /**
28      * 获取连接对象
29      * @return
30      * @throws SQLException 
31      */
32     public static Connection getConn() throws SQLException{
33         return dataSource.getConnection();
34     }
35     
36     /**
37      * 释放资源
38      * @param conn
39      * @param st
40      * @param rs
41      */
42     public static void release(Connection conn , Statement st , ResultSet rs){
43         closeRs(rs);
44         closeSt(st);
45         closeConn(conn);
46     }
47     public static void release(Connection conn , Statement st){
48         closeSt(st);
49         closeConn(conn);
50     }
51 
52     
53     private static void closeRs(ResultSet rs){
54         try {
55             if(rs != null){
56                 rs.close();
57             }
58         } catch (SQLException e) {
59             e.printStackTrace();
60         }finally{
61             rs = null;
62         }
63     }
64     
65     private static void closeSt(Statement st){
66         try {
67             if(st != null){
68                 st.close();
69             }
70         } catch (SQLException e) {
71             e.printStackTrace();
72         }finally{
73             st = null;
74         }
75     }
76     
77     private static void closeConn(Connection conn){
78         try {
79             if(conn != null){
80                 conn.close();
81             }
82         } catch (SQLException e) {
83             e.printStackTrace();
84         }finally{
85             conn = null;
86         }
87     }
88 }

"固步自封而不知"

来到这个世界上最公平的事是向死而生！

ajax_03--通过请求确认用户名是否已经存在（使用jQuery）

公告