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

最后展示一下运行结果：