java編程(2)——servlet和Ajax異步請求的接口編程（有調用數據庫的數據）

　　第一步：

　　1、爲項目配置 Tomcat 爲 server：

　　2、導入 mysql的jar包到項目目錄中：

第二步：編碼

1、數據庫連接類ConnectMysql.java代碼：

 1 package com.testing.mysql;
 2 
 3 import java.sql.Connection;
 4 import java.sql.DriverManager;
 5 
 6 public class ConnectMysql {
 7     //設置連接的成員變量
 8     public Connection conn;
 9     //數據庫的遠程連接地址、用戶名和密碼，此處是我自己的虛擬機裏面的MySQL數據庫（庫名爲test_project）和虛擬機的登錄用戶名、密碼
10     public static final String DBURL="jdbc:mysql://192.168.112.128:3306/test_project?useUnicode=true&autoReconnect=true&characterEncoding=utf-8";
11     public static final String DBUSER="root";
12     public static final String DBPWD="123456";
13     //構造方法
14     public ConnectMysql() {　　　　//此處也可以將地址、用戶名、密碼作爲參數傳入，後期調用時就可以參數化調用這個方法
15         try {
16             Class.forName("com.mysql.jdbc.Driver");
17             conn = DriverManager.getConnection(DBURL, DBUSER, DBPWD);
18             //設置連接的超時時間
19             DriverManager.setLoginTimeout(10);
20         } catch (Exception e) {
21             // TODO Auto-generated catch block
22             e.printStackTrace();
23         }
24     }
25 }

2、創建UseMysql的類：

  1 package com.testing.mysql;
  2 
  3 import java.sql.CallableStatement;
  4 import java.sql.Connection;
  5 import java.sql.ResultSet;
  6 import java.sql.ResultSetMetaData;
  7 import java.sql.SQLException;
  8 import java.sql.Statement;
  9 import java.util.HashMap;
 10 import java.util.Map;
 11 
 12 public class UseMysql {
 13 
 14     // 數據庫連接對象
 15     private Connection ct;
 16 
 17     // 構造函數中初始化這個數據庫連接對象
 18     public UseMysql(Connection conn) {
 19         ct = conn;
 20     }
 21 
 22     
 23     
 24     
 25     /**
 26      * @param name登錄用戶名
 27      * @return 返回查詢信息的結果集合
 28      */
 29     public Map<String, String> getUserInfo(String name) {
 30         String sql = "SELECT * FROM userinfo where username='" + name + "';";
 31         System.out.println(sql);
 32         // 保存查詢結果的集合
 33         ResultSet rs = null;
 34         // 聲明statement對象，通過這個對象查詢數據庫
 35         Statement sm;
 36         try {
 37             // 通過數據庫連接實例化statement對象
 38             sm = ct.createStatement();
 39             // 執行查詢
 40             rs = sm.executeQuery(sql);
 41 
 42             // 創建map存儲表中信息
 43             Map<String, String> map = new HashMap<String, String>();
 44             
 45             // 設置讀取結果的循環控制變量，代表獲取的數據的行數
 46             int j = 1;
 47             
 48             /*
 49              * rs!=null說明sql語句執行查找成功，有內容返回。 rs.next()代表着集合當中還有下一個元素（一行的數據），並且讀取該行的值。
 50              * 如果sql查詢不止一條語句（有用戶名重名的情況），則可以用while循環取這些值
 51              */
 52             while (rs != null && rs.next()) {
 53                 // 元組數據代表數據庫查詢結果中的一行,通過rsmd來獲取數據的列數
 54                 ResultSetMetaData rsmd = rs.getMetaData();
 55                 // 注意sql中的列從1開始，遍歷一行數據中的每列內容，並以鍵值對形式存儲到map中去
 56                 for (int i = 1; i <= rsmd.getColumnCount(); i++) {
 57                     // 展示的信息去除密碼列和用戶名列
 58                     if (!(rsmd.getColumnName(i).equals("pwd") || rsmd.getColumnName(i).equals("username")))
 59                         // 將每一列的名稱和數據作爲鍵值對存放到map當中，將行數拼接到鍵裏
 60                         map.put(rsmd.getColumnName(i) + j, rs.getString(i));
 61                 }
 62                 System.out.println(map.toString());
 63                 
 64                 // 行數自增
 65                 j++;
 66             }
 67             // 關閉statement對象和查詢結果集合對象，釋放資源
 68             sm.close();
 69             rs.close();
 70             return map;
 71         } catch (Exception e) {
 72             // TODO: handle exception
 73         }
 74         return null;
 75     }
 76 
 77     
 78     
 79     
 80     
 81     /**
 82      * 通過查詢語句驗證登錄結果的登錄方法，如果能夠查詢到結果，則說明登錄成功
 83      * 
 84      * @param 登錄用戶名name
 85      * @param 登錄密碼password
 86      * @return 返回登錄是否成功的布爾值，成功爲true，失敗爲false
 87      */
 88     public boolean Login(String name, String pwd) {
 89         
 90         String sql = "SELECT * FROM userinfo WHERE username='" + name + "' AND pwd='" + pwd + "';";
 91 
 92         // 聲明數據庫連接狀態statement對象，通過這個對象查詢數據庫
 93         Statement sm;
 94         // 設置一個變量來保存查詢結果集
 95         ResultSet rs = null;
 96         
 97         try {
 98             // 通過數據庫連接實例化一個statement對象sm
 99             sm = ct.createStatement();
100             
101             // 執行查詢語句
102             rs = sm.executeQuery(sql);
103             
104             // rs!=null說明sql語句執行查找成功，有內容返回，
105             // 封裝的方法rs.next()代表着集合當中還有下一個元素（一行的數據），並且讀取該行的值。
106             if (rs != null && rs.next()) {
107                 
108                 // 元組數據代表數據庫查詢結果中的一行。
109                 ResultSetMetaData rsmd = rs.getMetaData();
110                 
111                 // 聲明一個map來存儲一條記錄中的內容
112                 HashMap<String, String> map = new HashMap<String, String>();
113                 
114                 // 注意sql中的列從1開始，遍歷一條記錄中的每列內容，並以鍵值對形式存儲到map中去
115                 for (int i = 1; i <= rsmd.getColumnCount(); i++) {
116                     // 從第一列開始遍歷一條記錄中的每一列，將對應的鍵值對存儲到map當中
117                     map.put(rsmd.getColumnName(i), rs.getString(i));
118                 }
119                 System.out.println(map.toString());
120                 // 關閉statement對象和查詢結果集合對象，釋放資源
121                 sm.close();
122                 rs.close();
123                 // 如果查詢結果不爲空，就返回登錄成功
124                 return true;
125             }
126             // 如果查詢結果爲空，也要關閉對象釋放資源
127             sm.close();
128             rs.close();
129         } catch (SQLException e) {
130         }
131         // try建立查詢失敗或者查詢結果爲空都會執行到這裏，返回false
132         return false;
133     }
134 
135     
136     
137     
138     /**
139      * 通過  存儲過程  驗證登錄結果的登錄方法，如果能夠查詢到結果，則說明登錄成功 使用存儲過程進行驗證時，sql語句不再重新編譯，可以防止sql注入
140      * 
141      * @param 登錄用戶名name
142      * @param 登錄密碼password
143      * @return 返回登錄是否成功的布爾值，成功爲true，失敗爲false
144      */
145     public boolean PLogin(String name, String pwd) {
146         try {
147             // 創建調用存儲過程的對象，參數用？號代替，不要直接傳遞參數
148             CallableStatement cm = ct.prepareCall("{call login(?,?)}");
149             // 通過set方法傳遞存儲過程用到的參數，1和2代表第幾個參數，name和pwd代表參數值
150             cm.setString(1, name);
151             // cm.setInt(1, 1);
152             cm.setString(2, pwd);
153             // 獲取查詢結果
154             ResultSet rs = cm.executeQuery();
155             // 處理查詢結果，與之前的方法一致，不再重複添加註釋了
156             if (rs != null && rs.next()) {
157                 ResultSetMetaData rsmd = rs.getMetaData();
158                 HashMap<String, String> map = new HashMap<String, String>();
159                 for (int i = 1; i <= rsmd.getColumnCount(); i++) {
160                     map.put(rsmd.getColumnName(i), rs.getString(i));
161                 }
162                 System.out.println(map.toString());
163                 cm.close();
164                 rs.close();
165                 return true;
166             }
167             cm.close();
168             rs.close();
169         } catch (SQLException e) {
170             // TODO Auto-generated catch block
171             // e.printStackTrace();
172         }
173         return false;
174     }
175 
176 }

3、登錄的後臺 LoginTry.java 代碼：

  1 package com.testing.login;
  2 
  3 import java.io.IOException;
  4 import java.util.Map;
  5 import java.util.regex.Matcher;
  6 import java.util.regex.Pattern;
  7 
  8 import javax.servlet.ServletException;
  9 import javax.servlet.annotation.WebServlet;
 10 import javax.servlet.http.HttpServlet;
 11 import javax.servlet.http.HttpServletRequest;
 12 import javax.servlet.http.HttpServletResponse;
 13 
 14 import com.testing.mysql.ConnectMysql;
 15 import com.testing.mysql.UseMysql;
 16 
 17 /**
 18  * Servlet implementation class LoginTry
 19  */
 20 @WebServlet("/LoginTry")
 21 public class LoginTry extends HttpServlet {
 22     private static final long serialVersionUID = 1L;
 23 
 24     /**
 25      * @see HttpServlet#HttpServlet()
 26      */
 27     public LoginTry() {
 28         super();
 29         // TODO Auto-generated constructor stub
 30     }
 31 
 32     /**
 33      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
 34      *      response)
 35      */
 36     protected void doGet(HttpServletRequest request, HttpServletResponse response)
 37             throws ServletException, IOException { ........
 38    
 39     
 40     /**
 41      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
 42      *      response)
 43      */
 44     protected void doPost(HttpServletRequest request, HttpServletResponse response)
 45             throws ServletException, IOException {
 46         // TODO Auto-generated method stub
 47 
 48         // 返回值編碼的修改
 49         response.setContentType("text/html;charset=UTF-8");
 50         // 收到的參數的編碼修改
 51         request.setCharacterEncoding("UTF-8");
 52 
 53         String user = request.getParameter("userid");　　　　//“userid”要與前端form表單中的用戶名的<input>元素的name屬性對應
 54         String pwd = request.getParameter("pwds");　　　　　　//“pwds”要與前端form表單中的密碼的<input>元素的name屬性對應
 55         
 56         //聲明一個數據庫查詢結果實例
 57         Map<String, String> userinfo;
 58 
 59         //設置正則匹配模式，進行用戶名和密碼的正則過濾
 60         String regEx = "[^a-zA-Z0-9_-]";
 61         Pattern p = Pattern.compile(regEx);
 62         // 調用pattern對象p的mathcer方法，生成一個匹配matcher對象
 63         Matcher m = p.matcher(user);
 64         Matcher m1 = p.matcher(pwd);
 65         //設置返回信息的變量res
 66         String res = "{";
 67         
 68         // 判斷用戶名密碼不爲空
 69         if (user != null && pwd != null) {
 70             // 判斷長度3~16位
 71             if (user.length() > 2 && user.length() < 17 && pwd.length() > 2 && pwd.length() < 17) {
 72                 // 判斷不包含特殊字符
 73                 if (!m.find() && !m1.find()) {
 74 
 75                         // 創建sql連接，以及實例化UseMysql類型
 76                         ConnectMysql connSql = new ConnectMysql();
 77                         UseMysql mySql = new UseMysql(connSql.conn);    
 78                         //使用創建的對象來調用UseMysql類中的Login（user，pwd）方法並將返回的布爾結果作爲判斷值
 79                         if (mySql.Login(user, pwd)) {        
 80                             res += "\"status\":200,\"msg\":\"恭喜您，登錄成功！\"}";
 81                             userinfo = mySql.getUserInfo(user);
 82                         } else {
 83                             res += "\"status\":3000,\"msg\":\"用戶名密碼不匹配！\"}";
 84                         }
 85                     
 86                 } else {
 87                     res += "\"status\":3003,\"msg\":\"用戶名密碼不能包含特殊字符！\"}";
 88                 }
 89             } else {
 90                 res += "\"status\":3004,\"msg\":\"用戶名密碼長度必須是3至16位！\"}";
 91             }
 92         } else {
 93             res += "\"status\":3005,\"msg\":\"用戶名密碼長度不能爲空！\"}";
 94         }
 95         // 接口返回信息，返回信息中顯示本次請求時的sessionID
 96         response.getWriter().append(res);
 97 
 98     }
 99 
100 }

4、前端界面 index.html 代碼：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta http-equiv="content-type" content="text/html" charset="utf-8">
 5         <title>zzp的網頁</title>
 6         
 7         <!--接下來引入JQuery最小版本的庫文件  -->
 8         <script src="jquery.min.js" type="text/javascript"></script>
 9         <!-- 接下來引入自己寫的js庫文件 -->
10         <script src="test.js" type="text/javascript"></script>    
11         
12     </head>
13     
14     
15     <body >
16         <h1 align="center">Hello HTML</h1>
17         
18         <form id="loginForm" method="post" action="./LoginTry">
19             <div id="info" style="text-align:center">
20                 <p>請輸入您的賬號：</p>
21                 <input type="text" name="userid" placeholder="登錄名" />
22                 <br/>
23                 <p>請輸入您的密碼：</p>
24                 <input type="password" name="pwds" placeholder="密碼" />
25                 <br/><br/>
26                 
27                 <!-- 下面這一句原本是爲了使用form表單的方式來調用post方法的 -->
28                 <!-- <input type="submit" value="開始登錄"> -->
29                 
30                 <!-- 使用“登錄”按鈕的onclick事件來調用js文件，執行post方法的異步請求 -->
31                 <input type="button" onclick="javascript:loginJS()" value="登錄" />
32             </div>
33         </form>
34             
35     </body>
36 </html>

5、用到的js代碼：

 1 /**
 2  * 點擊登錄界面中“登錄”按鈕會調用的js方法
 3  */
 4 
 5 function loginJS() {
 6 
 7     // 定義一個存放URL的變量,指定請求的接口地址
 8     var AjaxURL = "http://localhost:8080/LoginInterServlet/LoginTry";
 9 
10     $.ajax({
11         url : AjaxURL,
12         type : "post", // 採用post方法
13         dataType : "json", // 請求和返回的參數格式；如果是非json格式需要使用text格式
14         // 獲取id=loginForm的form表單中的參數
15         data : $('#loginForm').serialize(),
16         
17         // 當接口調用成功時，執行success中的方法，result參數指的是接口返回的信息
18         success : function(result) {
19             // result[***]表示的是對應的鍵經過 解析後的值
20             // alert("status:"+result["status"]+",  "+result["msg"]);
21             
22             //如果登錄成功，將id=“info”的元素改爲接口返回值中“msg”信息
23              $('#info')[0].innerText=result["msg"];
24         },
25         
26         // 當接口調用失敗時，執行error中的方法
27         error : function() {
28             alert("服務器忙……請稍後重試！");
29         }
30     });
31 
32 }