我有一个用户登录表单,当密码与数据库中的密码不匹配时会出现一条错误消息。我将错误消息重定向到如下所示的表单,但是当它在表单上显示错误消息时,它将删除电子邮件/密码输入字段中的数据。显示错误消息后如何将数据仍保留在输入字段中?预先谢谢你。
// SERVLET重定向到JSP
request.setAttribute("errorMessage", "Wrong credentials!");
request.getRequestDispatcher("/Login.jsp").forward(request, response);
// JSP表单页面
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>User Log in</title>
</head>
<body>
<form action = "LoginServlet" method="POST">
<h3>Sign In</h3><br>
Email: <input type="text" name="email" required><br>
Password: <input type="password" name="pass" required><br>
<div style="color: #FF0000;">${errorMessage}</div><br>
<input type="submit" name="submit" value="Sign in">
</form>
</body>
</html>
答案 0 :(得分:1)
我通过添加以下几行来解决此问题:
// SERVLET
request.setAttribute("email",request.getParameter("email"));
request.setAttribute("pass", request.getParameter("pass"));
request.setAttribute("errorMessage", "Wrong credentials!");
request.getRequestDispatcher("/Login.jsp").forward(request, response);
// JSP页面
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>User Log in</title>
<%@ include file="PageHeader.html" %>
</head>
<body>
<form action = "LoginServlet" method="POST">
<h3>Sign In</h3><br>
Email: <input type="text" name="email" required value="${email}"><br>
Password: <input type="password" name="pass" required value="${pass}"><br>
<div style="color: #FF0000;">${errorMessage}</div><br>
<input type="submit" name="submit" value="Sign in" id="sButton">
</form>
</body>
</html>
答案 1 :(得分:0)
这是一个有关如何使用AJAX实现此目的的示例。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>User Log in</title>
<%@ include file="PageHeader.html" %>
<!-- you need to include jquery for this example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action = "LoginServlet" method="POST" id="someform">
<h3>Sign In</h3><br>
Email: <input type="text" name="email" required><br>
Password: <input type="password" name="pass" required><br>
<div style="color: #FF0000;display:none" id="someMsg"></div><br>
<input type="submit" name="submit" value="Sign in" id="sButton">
</form>
<script>
//the following will ajaxify your form, all you have to do is add 'id="someform" to it
//reference here: https://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax
$(document).on("submit", "#someform", function(event) {
var $form = $(this);
$.post($form.attr("action"), $form.serialize(), function(response) {
//response is not empty (because it contains the error string message)
if(response){
//here we are using the response from the servlet to set the text of the div. .show() makes the element visible, .delay(1000) is a 1000ms delay for .fadeOut() which makes the element invisible after some time
$('#someMsg').text(response).show().delay(1000).fadeOut("slow");
}else{
//response here is empty (String error = "";), so we just redirect the user (because details match)
window.location = "Welcome.jsp";
}
});
event.preventDefault(); // Important! Prevents submitting the form.
});
</script>
</body>
</html>
在头部添加jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
将id="someform"
添加到您的表单
和id="someMsg"
到您的div(也使display:none
)
然后为您的LoginServlet尝试如下操作:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String pass1 = request.getParameter("pass");
String email = request.getParameter("email");
String error = "";
//do whatever you need to do here, just don't do any forwarding
//here we check if the details are incorrect (!), javascript on the front end will decide whether to stay on the same page or redirect based on the value we send in error string.
if(!validate(email,pass1)){
//if details are wrong, lets send the following string:
error = "Your password or email is wrong and you should feel bad.";
}
response.setContentType("text/plain"); // Set content type of the response so that jQuery knows what it can expect.
response.setCharacterEncoding("UTF-8"); // You want world domination, huh?
response.getWriter().write(error); // Write response body.
}
让我知道它是否对您有用