做一个 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){
- Windows.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(); 返回值.
最后展示一下运行结果:
来源: https://www.cnblogs.com/lyuzt/p/9989988.html