500 server error in ajax using spring-boot

Question

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

Can you post the server error stacktrace? you should be able to find it in your spring boot logs/console. And here is an example of jquery ajax + spring boot: https://mkyong.com/spring-boot/spring-boot-ajax-example/ — pleft, Aug 29 '21 at 07:09
@pleft yeah I posted that error but I didn't get a correct answer and most of the answers are for PHP, there is no documentation for spring boot connectivity, please help me guys — Karan_raj, Aug 29 '21 at 08:42
This might answer your question. https://stackoverflow.com/questions/2099728/how-do-i-send-an-ajax-request-on-a-different-port-with-jquery — Thallius, Aug 29 '21 at 12:32
@ClausBönnhoff No it's not what I want, I don't want to get JSON data, I just want to validate the login without reloading the page using ajax, the method loginchecker will return the login is successful or not according to it the page should respond, my problem is with the URL calling because the error is 500, I don't where I made mistake — Karan_raj, Aug 29 '21 at 13:41
Are you sure, your Ajax call is reaching the spring boot service? Where is your .js script is coming from? — Thallius, Aug 29 '21 at 14:00
@Claus Bönnhoff I used internal script, I don't know whether it is reaching spring boot, I think that's the problem because the error 500 is based on url and I gave a print statement in that url method and it didn't call but I don't know what mistake I did — Karan_raj, Aug 29 '21 at 16:24
Everyone I cleared the error and my project works, thank you, everyone, but still, I didn't why it works like this, I post my answer, and help me to understand this concept — Karan_raj, Aug 29 '21 at 19:03

Karan_raj · Accepted Answer · 2021-08-29T19:16:47.507

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:

<%@ 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();
                $.ajax({
                    url: "/LoginChecker",
                    data: 'data='+username+' '+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("Server problem");
                    }               
                });
            });            
        });
    </script>
</body>
</html>

LOGIN CONTROLLER CODE

@RequestMapping("/LoginChecker")
@ResponseBody
public String loginChecker(@RequestParam("data") String datas) {
    String data[] = datas.split(" ");
    if(AjaxDemoService.loginValidator(data[0], data[1], repo)) {
        username = data[0];
        return "true";
    }
    return "false";
}

If anyone has the same error, use this as a reference.

score 0 · Answer 2 · answered Aug 29 '21 at 19:26

0

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.

answered Aug 29 '21 at 19:26

smac2020

9,637
4
24
38

I checked it out earlier, but in this project guide, they didn't use ajax call, this won't check the login data validation without reloading the page. – Karan_raj Aug 30 '21 at 07:01

500 server error in ajax using spring-boot

2 Answers2