Вот пример того, как этого добиться с помощью 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: /2520122/kak-ispolzovat-servlety-i-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.
}
Дайте мне знать, если он работает для вас