在邮递员上发布请求但不在浏览器中（代码状态：415） - Spring Boot，thymeleaf答案

【问题标题】：Post request work on postman but not in browser (CodeStatus : 415) - SpringBoot, thymeleaf在邮递员上发布请求但不在浏览器中（代码状态：415） - Spring Boot，thymeleaf
【发布时间】：2022-01-22 21:59:18
【问题描述】：

有点遗憾，但我刚开始做前端开发。

我的问题：我有一个带有表单的 html 页面，并且提交请求正文没有传输到后端。

我正在使用 spring boot、spring security、thymeleaf。

这里是控制器：

RegistrationController java 类

package my.package;

import lombok.AllArgsConstructor;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping(path = "/registration")
@AllArgsConstructor
public class RegistrationController {

    private RegistrationService registrationService;

    @PostMapping
    public  String register(@RequestBody RegistrationRequest request){

        registrationService.register(request);

        return "Registration need to be confirmed";
    }

    @GetMapping(path = "confirm")
    public String confirm(@RequestParam("token") String token) {
        return registrationService.confirmToken(token);
    }

}

使用 PostMan，请求作为 Post 请求，正文为 json：

{
    "firstName": "firstName",
    "lastName": "lastName",
    "email": "firstName.lastName@gmail.com",
    "password": "password"
}

但是当我按如下方式实现 html 页面时：

<!DOCTYPE html>
<html lang="fr" xmlns:th="https://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>registration page</title>
</head>
<body>
    <div>
                    <form th:action="@{/registration}" method="post">
                        <div>
                            <input type="text" name="firstName" id="firstName">
                        </div>
                        <div>
                            <input type="text" name="lastName" id="lastName">
                        </div>
                        <div>
                            <input type="email" name="email"  id="email">
                        </div>
                        <div>
                            <input type="password" name="password" id="password">
                        </div>
                        <div>
                            <input type="submit" value="Submit">
                        </div>
                    </form>
    </div>
</body>
</html>

并填写公式并按提交业务服务不成功：得到 415 状态错误

使用 DevTools，我看到负载很好地填充

我不明白为什么@RequestBody 没有填充有效负载数据。也许问题出在其他地方。我不明白为什么在邮递员中请求有效但在浏览器中无效

感谢您提供的所有帮助

亚历克斯

【问题讨论】：

stackoverflow.com/questions/54065603/…
感谢您的链接，现在需要明确的是，@RequestBody 不适用于表单有效负载数据。需要稍微回顾一下我的后端

标签： spring-boot forms post postman thymeleaf

【解决方案1】：

相反，在表单提交时进行 AJAX 调用。确保您的表单有 ID

<form id="form-id" method="post">


$( document ).ready(function() {
// SUBMIT FORM
$("#form-id").submit(function(event) {
    // Prevent the form from submitting via the browser.
    event.preventDefault();
    ajaxPost();
});


function ajaxPost(){
    
    // PREPARE FORM DATA
    var formData = {
        firstname : $("#firstName").val(),
        lastname :  $("#lastName").val(),
        --------other attributes with values---------
    }
    
    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "/registration",
        data : JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            ----redirect to another url----
            console.log(result);
        },
        error : function(e) {
            alert("Error!")
            console.log("ERROR: ", e);
        }
    });
    
    // Reset FormData after Posting
    resetData();

}

function resetData(){
    $("#firstname").val("");
    $("#lastname").val("");
}

})

【讨论】：