时间戳

首页 > 解决方案 > 使用spring-boot的ajax中的500服务器错误

jquery - 使用spring-boot的ajax中的500服务器错误

问题描述

我尝试在我的 Spring Boot 项目中使用 ajax 调用进行登录验证，但是在使用 ajax 时收到 500 个服务器错误，我已在其中附加了我的 JSP 页面和我的控制器代码。

我的登录页面

<%@ 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>

我的登录控制器代码

@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";
}

我的错误

jquery-3.6.0.min.js:2 GET http://localhost:8080/LoginChecker?username=karan&password=12345678 500 发送@ jquery-3.6.0.min.js:2 ajax @ jquery-3.6.0.min .js:2（匿名）@LoginPage:100 dispatch @jquery-3.6.0.min.js:2 v.handle @jquery-3.6.0.min.js:2

我不知道为什么会出现这个错误，我检查了网上的所有文档，但是没有任何文档可以连接 spring-boot 和 ajax 调用

标签： jqueryajaxspring-boot

解决方案

我不知道为什么会出现错误，但我发现可以发送到控制器的数据可以是单个值，例如字符串或数字，所以我将我的登录数据，即用户名和密码与“数据”放在了一起' 作为它的参数，给它一个冒号，然后我使用数据作为参数获取字符串，然后我使用空格作为分隔符拆分字符串并验证登录

我附上了代码

登录页面：

<%@ 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>

登录控制器代码

@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";
}

如果有人有同样的错误，请将此作为参考。

推荐阅读