登录大体有两种方法一个是表单提交另一个就是ajax提交
1.表单提交
表单提交如果前端JS没有验证十分简单，不详述。
- JS验证用户名、密码是否为空
- 其中非submit和button按钮
submit有一些注意事项
- form中要onsubmit=“return login()” 其中“return”一定要写
- return false;//因为这是submit表单提交 返回false 不进行请求 其中“false”要写 button可以不用。
<script src="login/vendor/jquery/jquery-3.2.1.min.js"></script>
<script>
function login() {
var username=$("#username").val();
if (username==""){
alert("用户名不能为空！");
return false;//因为这是submit表单提交 返回false 不进行请求
};
var password=$("password").val();
if (password==""){
alert("密码不能为空！");
return false;
}
}
</script>
<body>
<form action="loginFrom" method="post" onsubmit="return login()">
账户：<input id="username" type="text">
密码：<input id="password" type="password">
<input type="submit" value="提交">
</form>
Button提交
<script src="login/vendor/jquery/jquery-3.2.1.min.js"></script>
<script>
function login() {
var username=$("#username").val();
if (username==""){
alert("用户名不能为空！");
return;
};
var password=$("#password").val();
if (password==""){
alert("密码不能为空！");
return;
}
$("#loginFrom").submit();
}
</script>
<body>
<form action="loginFrom" method="post" id="loginFrom">
账户：<input id="username" name="username" type="text">
密码：<input id="password" name="password" type="password">
<input type="button" value="提交" onclick="login()">
</form>
2.ajax提交
<script src="login/vendor/jquery/jquery-3.2.1.min.js"></script>
<script>
function login() {
var username=$("#username").val();
if (username==""){
alert("用户名不能为空！");
return;
};
var password=$("#password").val();
if (password==""){
alert("密码不能为空！");
return;
}
//$("#loginFrom").submit();
$.post("loginFrom",{username:username,password:password},function (data) {
if(data=="1"){
//跳转到成功页面
location.href ="successPage.jsp";
}else{
alert("用户名或者密码不正确!");
}
});
}
</script>
<body>
账户：<input id="username" name="username" type="text">
密码：<input id="password" name="password" type="password">
<input type="button" value="提交" onclick="login()">
Servlet
String username =request.getParameter("username");
String password =request.getParameter("password");
username =new String(username.getBytes("iso-8859-1"),"UTF-8");
password =new String(password.getBytes("iso-8859-1"),"UTF-8");
UserService userService=new UserServiceImpl();
User user =userService.getUserByUsernameAndPassword(username,password);
if(user!=null){
System.out.println("登录成功");
//session作用域，一次会话有效
HttpSession session=request.getSession();
session.setAttribute("user",user);
String code ="1";
response.getWriter().write(code);
//response.sendRedirect("success.html");
}else {
System.out.println("登录失败");
String code ="0";
response.getWriter().write(code);
//response.sendRedirect("fail.html");
}