使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) (2)

源代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <link href="http://www.likecs.com/js/node_modules/bootstrap3/dist/css/bootstrap.min.css"> <link href="http://www.likecs.com/js/node_modules/bootstrap3/dist/css/bootstrap-theme.css"> <script type="text/javascript" src="http://www.likecs.com/js/node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript"> function login() { var uname = $("#uname").val(); var upwd = $("#upwd").val(); if (uname == null || uname == "") { $("#unameMsg").html("用户名不能为空!"); return; } else $("#unameMsg").html(""); if (upwd.length == 0) { $("#upwdMsg").html("密码不能为空!"); return; } else $("#upwdMsg").html(""); if (upwd.length < 6 || upwd.length > 12) { $("#upwdMsg").html("密码应该在 6-12 位之间!"); return; } else $("#upwdMsg").html(""); $.ajax({ url: "Servlet", method: "get", data: { "uname": $("#uname").val(), "upwd": $("#upwd").val(), "role": $("#role").val() }, success: function (result) { if (result == "1") { window.location.href = "findUserInfoForAjax.html"; } else { $("#loginMsg").html("登录失败,请重试!"); } }, error: function () { alert("请求服务器失败!"); } }); } </script> </head> <body> <br><br> <br><br> <form> <div> <div> <div> <span></span>用户登录 </div> <div> <div> <h3>欢迎使用资源统一管理系统</h3> </div> <div> <label>用户名</label> <input type="text" placeholder="请输入用户名"> <label>*</label> </div> <label></label><br> <div> <label>密&nbsp;&nbsp;&nbsp;码</label> <input type="password" placeholder="请输入密码"> <label>*</label> </div> <label></label><br> <div> <label>权&nbsp;&nbsp;&nbsp;限</label> <select> <option value="admin">管理员</option> <option value="teacher">经理</option> <option value="student">用户</option> </select> </div> </div> <div> <label></label> <a href="javascript:login()"><span></span> 登录</a>&nbsp;&nbsp; <a href="javascript:loginForm.reset()"><span></span> 重置</a> </div> <br> <div> <div> &copy;2018-2019 肖朋伟的 CSDN 博客 Copy Right </div> </div> </div> </div> </form> </body> </html>

如果成功引入 Bootstrap3 ,打开服务器,打开本页面,会有下面界面:

在这里插入图片描述

(3)User.java 文件(有更新):

package com.pojo; //用来存放用户登录时,输入输出的信息 public class User { private int id; public int getId() { return id; } public void setId(int id) { this.id = id; } private String uname; private String upwd; private String lastLoginTime; public String getLastLoginTime() { return lastLoginTime; } public void setLastLoginTime(String lastLoginTime) { this.lastLoginTime = lastLoginTime; } private String role; public String getUname() { return uname; } public void setUname(String uname) { this.uname = uname; } public String getUpwd() { return upwd; } public void setUpwd(String upwd) { this.upwd = upwd; } public String getRole() { return role; } public void setRole(String role) { this.role = role; } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfygg.html