这是一个关于如何使用 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.
}
让我知道它是否适合你