jsp、jQuery、servlet互動實現登入功能
阿新 • • 發佈：2018-11-22
jsp、jQuery、servlet互動實現登入功能
做一個web專案，往往需要有一個登入模組，驗證使用者名稱和密碼之後跳轉頁面。為了實現更好的互動，往往需要用到 jQuery 等實現一些友好提示。比如使用者名稱或者密碼輸入為空的時候提示不能為空；點選提交的時候如果使用者名稱和密碼不正確，還需要通過 ajax 非同步請求實現友好提示。話不多說，先上程式碼（以部分為例）。
jsp：
<form action="LoginServlet" method="post" role="form" >
<div class="form-group user">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-user"></i>
</div>
<input class="form-control" id="username-input" type="text" placeholder=" 請輸入帳號" name="username">
</div>
<div id="username-error" class="error"></div>
</div>
<div class="form-group password">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="password-input" type="password" placeholder=" 請輸入密碼" name="password">
</div>
<div class="error" id="user-error"></div>
</div>
<div class="submit">
<input type="button" id="submit" name="submit" value="確認">
</div>
</form>
這樣就完成了一個簡單的登入介面了。（裡面的 “.form-group”、".fa"、“.input-group” 等都是 bootstrap 提供的，bootstrap 是挺受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動裝置優先的 WEB 專案。內容有點多，具體可以檢視 bootstrap 文件。）
由於 css 比較多，就不貼上來了，按照自己喜歡的風格完成就行了。
JQuary：
$(function(){
var username_error = $("#username-error");
var user_error = $("#user-error");
var username_input = $("#username-input");
var password_input = $("#password-input");
var user_error = $("#user-error");
var submit = $("#submit");
username_error.hide(); // 把提示框隱藏起來
user_error.hide();
// 密碼檢驗
function password_validate(){
var password = password_input.val();
if(password == ""){
user_error.html("密碼不能為空");
user_error.show();
}
else if(password_input.val().length>15){
user_error.html("密碼長度不能超過15");
user_error.show();
}
else user_error.hide();
}
// 使用者名稱檢驗
function username_validate(){
var username = username_input.val();
var user = {"username": username};
if (username.trim() == "") {
username_error.html("使用者名稱不能為空");
username_error.show();
username_input.val("").focus();
}
else username_error.hide();
}
// 提交時檢驗
function submit_validate(){
var username = username_input.val();
var password = password_input.val();
var user = {"username": username, "password": password};
if(username=="" || password==""){
user_error.html("使用者名稱或密碼不能為空");
user_error.show();
}
else{
$.ajax(
{
url: "/serverMonitor/webPage/LoginServlet", // 傳送請求的地址
data: user, // 傳送到伺服器的資料
beforeSend: function(){ // 在傳送請求的之前將按鈕的內容設定為 “登入中...”，有一個更好的體驗
submit.val("登入中...");
},
async: true, // 非同步方式
type: "post", // 請求方式
dataType: "json", // 伺服器返回的資料型別，有 xml、html、text、json、jsonp、script 這幾種型別，具體看情況使用
success: function(msg){ // 回撥函式，請求成功後呼叫
if(msg == false){
user_error.html("帳號或密碼錯誤");
user_error.show();
submit.val("確認");
}
if(msg == true){
window.location.href = "./main.jsp"; // 驗證成功後跳轉頁面
}
}
}
)
}
}
username_input.blur(username_validate); // 滑鼠焦點從使用者名稱移開觸發的事件
password_input.blur(password_validate); // 滑鼠移開密碼輸入框時觸發的事件
submit.click(submit_validate); // 單擊提交按鈕觸發的事件
})
這段 js 程式碼寫得實在不規範...沒怎麼寫 js，好好學一下怎麼規範程式碼還是挺重要的。
由於我是先在頁面把顯示錯誤資訊的 div 實現了，所以在 jQuery 裡面先把他們隱藏起來，碰到錯誤的時候再把錯誤資訊寫入 div 中並顯示出來。另外關於 Ajax 的引數我也註釋在上面了，詳情可以上網查詢它的作用及用法。
servlet：
@WebServlet("/webPage/LoginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginServlet() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 獲取登入頁面輸入的使用者名稱和密碼
String username = request.getParameter("username");
String password = request.getParameter("password");
// 呼叫 service 完成登入操作
UserService userservice = new UserService();
User user;
try {
user = userservice.loginByUser(username,password);
// 登入成功，將使用者儲存到 session 中
request.getSession().setAttribute("user", user);
response.getWriter().print(true);
return;
} catch (LoginException e) {
// 如果出現問題，將錯誤資訊儲存到request，並在登入介面顯示錯誤資訊
e.printStackTrace();
request.setAttribute("message", e.getMessage());
response.getWriter().print(false);
}
}
}
主要實現的就是以上的程式碼，至於 dao 層、service 層以及 bean 還有一個自定義異常我就不詳寫了。之前本來是打算用重定向實現登入成功後頁面跳轉，不成功的話將錯誤資訊傳到前端顯示的。但是犯了一個錯，在 ajax 的 dataType 寫成 “html”，以至於將要跳轉的頁面寫進了div裡。後來改成返回 json。至於不能進行重定向， Ajax 是為了區域性重新整理網頁，它終究屬於前端，它只會獲取請求返回的資料，其他的任何動作一概不去做，所以最好還是返回值給 Ajax 判斷，通過 response.getWriter().print(); 返回值。
最後展示一下執行結果：
