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：

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(); 返回值。

最后展示一下運行結果：