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(); 返回值。
最后展示一下运行结果: