在使用servlet进行登录校验时, 往往有2次校验, 分别是前端校验和后端校验
如果用户未填写表单, 或格式明显不对, 那么使用js进行前端校验, 没必要使用后端校验, 毕竟太浪费时间和服务成本了. 当前端校验完毕后, 就需要把数据传递给服务器进行校验, 以检验用户账户密码的正确性.
此时, 如果我们使用了form发送action请求, 那么页面就会跳转, 一旦用户名和密码不匹配, 我们再让用户退回登录界面是很不友好的, 所以我们应该尽量使用ajax
大概流程图可以如下表示 :
前端代码
假设前端是一个学生成绩管理系统, 有3种用户, 分别是学生, 教师, 管理员, 我们写input做输入框, 并且写一个radio做身份选择, 前端代码仅供参考
<!DOCTYPE html>
<html>
<head>
<title>学生成绩管理系统</title>
<meta charset="utf-8">
<style>
*{margin: 0px;padding: 0px;}
#header{font-size: 36px;}
#header, #myform{text-align: center;}
#myfooter{position: absolute;left: 40%;}
#header{margin-top:60px;}
#myform{margin-top: 120px;}
#myfooter{margin-top: 150px;}
input{margin-right: 10px;font-size: 22px;}
</style>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<h2 id="header">欢迎使用学生成绩管理系统!</h2>
<div id="myform">
<input id="username" type="text" placeholder="账号" name="username" onblur="return checkuser()">
<input id="password" type="password" placeholder="密码" name="password" onblur="return checkpwd()">
<input type="submit" value="登录" onclick="checkAll()">
<br><br>
<label for="student">学生</label><input type="radio" id="student" name="identity" value="学生" checked="checked">
<label for="teacher">教师</label><input type="radio" id="teacher" name="identity" value="教师">
<label for="admin">管理员</label><input type="radio" id="admin" name="identity" value="管理员">
</div>
<footer>
<div id="myfooter">
<p><b>温馨提示:</b></p><br>
<ul>
<li>请妥善保管您的账号密码!</li>
<li>离开本系统时,请别忘记退出登录.</li>
</ul>
</div>
</footer>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script>
function checkuser() { //判断用户名是否为空
var user = $("#username");
if(user.val()){
user.css("border","");
return true;
}else{
user.css("border","1px solid red");
return false;
}
}
function checkpwd() { //判断密码是否为空
var pwd = $("#password");
if (pwd.val()){
pwd.css("border","");
return true;
}else{
pwd.css("border","1px solid red");
return false;
}
}
$(document).keypress(function(e) { //给登录按钮绑定enter快捷键
var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if (eCode == 13){
// alert('您按了回车键')
checkAll();
}
});
function checkAll() { //表单校验, 判断用户名和密码是否为空
if (checkuser() && checkpwd()){
// alert("前端校验通过")
//ajax异步请求,由服务器判断用户名密码是否配对
$.post("LoginServlet",{username:$("#username").val(),
password:$("#password").val(),identity:$('input[name="identity"]:checked').val()},
function(msg){
//刷新验证码，下次注册必须重新输入
// changeCode();
if(msg!="Error"){ //说明用户正确,自动跳转响应的url
var host = location.host;
var hh = "http:"+msg; //拼接对应的url
location.href = hh; //自动重定向
}else {
//用户名与密码不匹配
alert("用户名或密码错误!");
}
},"text");
}else{//校验未通过,并输出原因
if(!checkuser()){
alert("请填写用户名!");
$("#username").focus();
}else{
alert("请填写密码!");
$("#password").focus();
}
}
}
</script>
</body>
</html>
后端代码
后端代码, 仅给出servlet, 完整的应该有三个用户的实体类, 以及dao
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 处理用户的登录的servlet
*/
@WebServlet(name = "LoginServlet", urlPatterns = "/LoginServlet")
public class LoginServlet extends HttpServlet {
private HttpServletRequest request;
private HttpServletResponse response;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数
String userType = request.getParameter("identity");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("获得的用户类型是:"+userType);
System.out.println("获得的用户账户是:"+username);
System.out.println("获得的用户密码是:"+password);
//2.判断用户类型, 并封装为Admin,Student,或Teacher对象,
//3.调用dao判断用户,如果用户输入正确,响应对应的后台首页url,并终止处理逻辑
UserDao dao = new UserDaoImpl();
boolean userEmpty = true;
try{
if(userType.equals("学生")) {
Student student = new Student(username,password);
Student returnStu = dao.stuLogin(student);
if (returnStu!=null){
//如果学生账户密码正确, 响应它的后台首页url
request.getSession().setAttribute("student",username);//student存入到session中
response.getWriter().write(request.getContextPath()+"/student/index.jsp");
return;
}
}else if (userType.equals("教师")){
Teacher teacher = new Teacher(username,password);
Teacher returnTea = dao.teaLogin(teacher);
if (returnTea!=null){
//如果教师账户密码正确, 响应它的后台首页url
request.getSession().setAttribute("teacher",username);//teacher存入到session中
response.getWriter().write(request.getContextPath()+"/teacher/index.jsp");
return;
}
}else{//肯定是管理员
Admin admin = new Admin(username,password);
Admin returnAdm = dao.admLogin(admin);
if (returnAdm!=null){
//如果管理员账户密码正确, 响应它的后台首页url
request.getSession().setAttribute("admin",username); //admin存入到session中
response.getWriter().write(request.getContextPath()+"/admin/index.jsp");
return;
}
}
}catch(Exception e){
e.printStackTrace();
}
//4.登录失败,响应错误消息, 并终止处理逻辑
response.setContentType("text/html;");
System.out.println("Error");
response.getWriter().write("Error");
return;
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//this is do nothing
}
}本篇完，还有疑问？
加入QQ交流群：11500065636 