I tried to do a login validation using ajax call in my spring boot project but I am receiving 500 server errors while using ajax, I have attached my JSP page and my controller code in this.
MY LOGIN PAGE
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Login Page</title>
<style>
body{
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
}
div{
padding: 20px 40px;
margin: 40px 30%;
background-color: white;
border-radius: 5px;
}
h2{
text-align: center;
font-weight: bold;
}
form{
margin-top: 40px;
}
label{
display: block;
font-size: larger;
font-weight: bold;
margin: 30px 0px 15px;
}
input[type="text"], input[type="password"], input[type="email"]{
border: none;
outline: none;
border-bottom: 2px solid black;
padding: 5px;
font-size: large;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus{
width: 300px;
border-bottom-color: dodgerblue;
}
input[type="submit"]{
display: block;
outline: none;
border: none;
cursor: pointer;
font-size: larger;
font-weight: bold;
background-color: dodgerblue;
color: white;
padding: 5px 15px;
border-radius: 20px;
margin-top: 30px;
margin-left: 65px;
margin-bottom: 20px;
}
p{
font-size: large;
margin: 0px;
}
a{
text-decoration: none;
color: dodgerblue;
}
a:hover{
color: darkblue;
}
span{
font-size: medium;
color: red;
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<h2>Login</h2>
<form id="form" action="Login" method="POST">
<label>Username</label>
<input id="username" type="text" name="username" placeholder="Enter your username">
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Enter your password">
<span id="error-message">Username and Password doesn't match</span>
</form>
<input id="submit-btn" type="submit" value="Login">
<p>New User?</p>
<p>Click here to <a href="RegisterPage">Sign Up</a></p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#submit-btn").on("click", function(){
var username = $("#username").val();
var password = $("#password").val();
console.log(username+" = "+password);
$.ajax({
url: "/LoginChecker",
contentType: "application/json; charset=utf-8",
data: {
username:username,
password:password
},
dataType : "text",
success: function(result){
if(result=="true"){
$("#error-message").css("display","none");
$("#form").submit();
}
else{
$("#error-message").css("display","block");
}
},
error: function(e){
alert(e);
}
});
});
});
</script>
</body>
</html>
MY LOGIN CONTROLLER CODE
@RequestMapping("/LoginChecker")
@ResponseBody
public String loginChecker(HttpServletRequest request, Model Map) {
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username+" = "+password);
if(AjaxDemoService.loginValidator(username, password)) {
return "true";
}
return "false";
}
MY ERROR
jquery-3.6.0.min.js:2 GET http://localhost:8080/LoginChecker?username=karan&password=12345678 500
send @ jquery-3.6.0.min.js:2
ajax @ jquery-3.6.0.min.js:2
(anonymous) @ LoginPage:100
dispatch @ jquery-3.6.0.min.js:2
v.handle @ jquery-3.6.0.min.js:2
I don’t why I got this error, I checked every documentation on the net, but there isn’t any documentation to connect spring-boot and ajax call
2
Answers
I don't why this had an error but I found out the data which can be sent to the controller can be a single value like string or number only, so I made my login data that is username and password in a single with 'data' as its parameter by giving a colon to it, then I got the string using the data as parameter then I split a string using whitespace as delimiter and validated the login
I have attached the code
LOGIN PAGE:
LOGIN CONTROLLER CODE
If anyone has the same error, use this as a reference.
The following document describes how to use security with a Spring BOOT app.
https://spring.io/guides/gs/securing-web/
As shown in this doc, you create a WebSecurityConfig class and follow the other details. This is the recommended way as opposed to setting up an AJAX call.