Question posted in
You can find the official documentation here.

500 server error in ajax using spring-boot – Jquery ajax

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search