Spring 筆記 -07- 使用 jQuery Ajax 非同步登入，並驗證使用者輸入資訊（maven）
阿新 • • 發佈：2019-01-07
Spring 筆記 -07- 使用 jQuery Ajax 非同步登入，並驗證使用者輸入資訊（maven）
本篇是對上一篇的專案的另一種實現加完善，上一篇 Spring 筆記 -06- 從 MySQL 建庫到 登入驗證資料庫資訊（maven）
本篇內容：
（1）上一篇是使用同步的請求實現登入，並由 Servlet 決定登陸後下一步做哪些事情，本篇使用 jQuery Ajax 的方式，實現非同步登入，登入成功後執行的內容在 js 中定義。
（2）在登入之前，在 js 中驗證表單中的，使用者名稱是否為空，密碼是否為空，密碼是否是 6-12 位，登入失敗後，返回提示資訊。
（3）登入成功後，返回使用者表的所有資訊，以表格形式展示：
（4）效果截圖：
本篇部分內容看起來和上一篇相似，但又很多改動，請認真檢視。
一、建立使用者資訊 MySQL 資料庫
（建議名稱一致，建庫同上一篇，再介紹一次）
（1）安裝 MySQL 請百度或參考：MySQL 安裝 + 入門大全 + 常用命令合集
（2）開啟 cmd ，登入 mysql 的 root 使用者，建立 studb 資料庫，建立表 tb_user ：
（3）顯示錶結構，插入 3 條使用者資料：
（4）資料庫 studb，表 tb_user 建立好了。
二、建立 Maven Web 專案，配置
（1）建立專案和修改目錄結構，因為常用，所以寫在了單獨的一篇文章，請檢視： Spring 筆記 -05- 建立 Maven Web 專案 + Tomcat 及目錄結構配置。
（2）序號（1）中說的，一篇文章，全部需要！
（3）配置 Maven 的配置檔案 pom.xml 檔案，位置在下面有提示：
本篇多加一個 fastjson，請注意！！
請更新為下面的 pom 最新配置：
<dependencies>
<!-- 本篇多加一個 fastjson，請注意 -->
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency> 
（4）點選自動匯入：
（5）建立如下目錄及檔案：
（6）下面需要先做一件事，就是在 js 目錄中，引入 Bootstrap3 和 jQuery
注意：只能是 Bootstrap3 版本：
配置步驟：
- 安裝 Node.js ，因為要使用 npm
- 在專案中 js 目錄，右鍵 Open in Explorer 可以開啟該目錄，並複製
- 在 cmd 進入專案的 js 目錄
- 使用命令：
npm install bootstrap3
npm install jQuery
三、具體檔案編碼：
貼程式碼前，先看一下整個完整的專案目錄結構：
前臺檔案：
後臺檔案目錄結構：
所有檔案程式碼：
（1）findUserInfoForAjax.html 檔案，用於登入成功時跳轉，該檔案在瀏覽器開啟時，js 會執行一個 findAllUser 方法，先請求 Servlet，然後 Servlet 去查詢資料庫資訊，創 User 實體類，再轉換成 json 資料格式，前端處理 json 資料，再顯示在頁面中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>findUserInfoForAjax</title>
<link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css">
<script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script>
<script>
function findAllUser() {
$.ajax({
url:"userServletForAjax",
method:"get",
//dataType:"jsonp",
//async:true,
success:function (result) {
var obj = JSON.parse(result);
var str = "";
$.each(obj,function (index,row,ee) {
str+="<tr><td>"+row.id+"</td><td>"+row.uname+"</td><td>"
+row.upwd+"</td><td>"+row.lastLoginTime+"</td><td>"+row.role+"</td></tr>"
});
$("#alluser").html(str);
},
error:function () {
alert("伺服器請求失敗")
}
})
}
findAllUser();
</script>
</head>
<body>
<table class="table table-striped table-hover">
<tr>
<td>id</td>
<td>uname</td>
<td>upwd</td>
<td>lastLoginTime</td>
<td>role</td>
</tr>
<tbody id="alluser">
</tbody>
</table>
</body>
</html>
（2）login_ajax.html 檔案，是登入的前端介面，在請求 Servlet 之前，會先檢查資料的格式，有使用者名稱是否為空，密碼是否為空，密碼是否為 6-12 位。
當格式正確再去請求，驗證資料庫中的使用者資訊是否匹配，成功則跳轉到上面的 findUserInfoForAjax.html 檔案，不成功提示使用者名稱或密碼錯誤！：
原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用者登入</title>
<link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css">
<script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
function login() {
var uname = $("#uname").val();
var upwd = $("#upwd").val();
if (uname == null || uname == "") {
$("#unameMsg").html("使用者名稱不能為空!");
return;
} else
$("#unameMsg").html("");
if (upwd.length == 0) {
$("#upwdMsg").html("密碼不能為空!");
return;
} else
$("#upwdMsg").html("");
if (upwd.length < 6 || upwd.length > 12) {
$("#upwdMsg").html("密碼應該在 6-12 位之間!");
return;
} else
$("#upwdMsg").html("");
$.ajax({
url: "Servlet",
method: "get",
data: {
"uname": $("#uname").val(),
"upwd": $("#upwd").val(),
"role": $("#role").val()
},
success: function (result) {
if (result == "1") {
window.location.href = "findUserInfoForAjax.html";
} else {
$("#loginMsg").html("登入失敗，請重試！");
}
},
error: function () {
alert("請求伺服器失敗!");
}
});
}
</script>
</head>
<body>
<br><br>
<br><br>
<form name="loginForm" id="loginForm">
<div class="center-block" style="width: 45%;height: 350px">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-apple"></span>使用者登入
</div>
<div class="panel-body">
<div class="text-success" align="center">
<h3>歡迎使用資源統一管理系統</h3>
</div>
<div class="input-group">
<label class="input-group-addon">使用者名稱</label>
<input class="form-control" type="text" id="uname" name="uname" placeholder="請輸入使用者名稱">
<label class="input-group-addon text-warning">*</label>
</div>
<label id="unameMsg" style="color: red"></label><br>
<div class="input-group">
<label class="input-group-addon">密 碼</label>
<input class="form-control" type="password" id="upwd" name="upwd" placeholder="請輸入密碼">
<label class="input-group-addon text-warning">*</label>
</div>
<label id="upwdMsg" style="color: red"></label><br>
<div class="input-group">
<label class="input-group-addon">權 限</label>
<select name="role" class="form-control ">
<option value="admin">管理員</option>
<option value="teacher">經理</option>
<option value="student">使用者</option>
</select>
</div>
</div>
<div align="center">
<label id="loginMsg" style="color: red"></label>
<a href="javascript:login()" class="btn btn-danger"><span
class="glyphicon glyphicon-log-in"></span> 登入</a>
<a href="javascript:loginForm.reset()" class="btn btn-primary"><span
class="glyphicon glyphicon-remove"></span> 重置</a>
</div>
<br>
<div class="panel-footer">
<div align="center">
©2018-2019 肖朋偉的 CSDN 部落格 Copy Right
</div>
</div>
</div>
</div>
</form>
</body>
</html>
如果成功引入 Bootstrap3 ，開啟伺服器，開啟本頁面，會有下面介面：
（3）User.java 檔案（有更新）：
package com.pojo;
//用來存放使用者登入時，輸入輸出的資訊
public class User {
private int id;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
private String uname;
private String upwd;
private String lastLoginTime;
public String getLastLoginTime() {
return lastLoginTime;
}
public void setLastLoginTime(String lastLoginTime) {
this.lastLoginTime = lastLoginTime;
}
private String role;
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getUpwd() {
return upwd;
}
public void setUpwd(String upwd) {
this.upwd = upwd;
}
public String getRole() {
return role;
}
public void setRole(String role) {
this.role = role;
}
}
（4）UserDAO.java 檔案（有更新）：
package com.dao;
import com.dbutil.DBUtils;
import com.pojo.User;
import java.util.List;
public class UserDAO {
public List<User> findAllUser(){
DBUtils dbUtils = new DBUtils();
return dbUtils.findAllUser();
}
//返回 0 或 1
public int login(User user){
DBUtils dbUtils = new DBUtils();
//與資料庫是否匹配，匹配為 1
int temp = dbUtils.login(user);
return temp;
}
}
（5）DBUtils.java 檔案：
！！！ 成敗在與這個檔案
- 自行更改資料庫名
- 自行更改表名（兩個）
- 自行更改 root 的密碼
- 檢查服務是否啟動
package com.dbutil;
import com.pojo.User;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class DBUtils {
Connection conn;
//預處理
PreparedStatement pstmt;
//結果集
ResultSet rs;
public DBUtils(){
try{
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/studb?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC","root","xiaopengwei");
} catch (Exception e){
e.printStackTrace();
}
}
public int login(User user){
try{
pstmt=conn.prepareStatement("select * from tb_user where uname = ? and upwd = md5(?)");
pstmt.setString(1, user.getUname());
pstmt.setString(2, user.getUpwd());
rs = pstmt.executeQuery