无法在 thymeleaf 中创建发布请求答案

【问题标题】：Can't create post request in thymeleaf无法在 thymeleaf 中创建发布请求
【发布时间】：2021-07-12 13:23:35
【问题描述】：

我尝试创建POST 请求以将我的form 发送到Spring 服务器，但我只收到此错误：

java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'form' available as request attribute

这是我的控制器的样子：

// Form post handler
@PostMapping("/")
public String home(@ModelAttribute Form form, BindingResult bindingResult, Model model) {
    Gson g = new Gson();
    Form form_new = g.fromJson(JavaWebApplication.runtimeJsonContent, Form.class);
    model.addAttribute("form", form);
    model.addAttribute("ip", form.IP);
    model.addAttribute("gateway", form.Gateway);
    model.addAttribute("port", form.Port);
    model.addAttribute("IncomingConnections", form.IncomingConnections);
    return "index";
}

这是我的表单类：

public class Form {
    public String IP;
    public String Gateway;
    public int Port;
    public boolean IncomingConnections;
    public int QoSEnable = 0;

    public Form(){}
    public Form(String IP, String gateway, int port, boolean incomingConnections) {
        this.IP = IP;
        this.Gateway = gateway;
        this.Port = port;
        this.IncomingConnections = incomingConnections;
        this.QoSEnable = 0; // Assert that 0 is default
        ExportToJson(this);
    }
    public Form(String IP, String gateway, int port, boolean incomingConnections, int qosEnable) {
        this.IP = IP;
        this.Gateway = gateway;
        this.Port = port;
        this.IncomingConnections = incomingConnections;
        this.QoSEnable = qosEnable;
        ExportToJson(this);
    }
}

我的index.html网页绑定在/上：

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{./styles/main.css}">
    <title>Document</title>
</head>
<body>
<form method="post" action="#" th:action="@{/}" th:object="${form}">
    <div id="container">
        <img src="https://kable-swiatlowodowe.net.pl/wp-content/uploads/2017/08/mikrotik.png" width="20%" style="margin-bottom: 5%;">
        <br>
        <div id="input-el">
        <div class="input-element"><input type="text" placeholder="IP" name="IP" th:value="${ip}" th:field="*{IP}" id="input-element-ip"></div>
        <div class="input-element"><input type="text" placeholder="Gateway" th:value="${gateway}" th:field="*{Gateway}" name="Gateway" id="input-element-gateway"></div>
        <div class="input-element"><input type="number" placeholder="Port" th:value="${port}" th:field="*{Port}" name="Port" id="input-element-port"></div>

    </div>
        <div id="checkbox-el">
        Incoming connections:<br>
        <label><input type="checkbox" th:checked="${IncomingConnections}" th:field="*{IncomingConnections}" name="conections" id="conections-el">Allow</label>
    </div>

        QoS Mode<br>
        <label><input type="radio" name="qos-mode-el" id="input-radio-game-first" checked>Game First</label>
        <label><input type="radio" name="qos-mode-el" id="input-radio-multimedia-first">Multimedia First</label>
        <button type="submit">Save</button>
    </div>
</form>
</body>
</html>

邮递员请求示例：

对此请求的响应：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/main.css">
    <title>Document</title>
</head>

<body>
    <form method="post">
        <div id="container">
            <img src="https://kable-swiatlowodowe.net.pl/wp-content/uploads/2017/08/mikrotik.png" width="20%" style="margin-bottom: 5%;">
            <br>
            <div id="input-el">
                <div class="input-element">
                    <input type="text" placeholder="IP" name="IP" value="" id="input-element-ip"></div>
                    <div class="input-element">
                        <input type="text" placeholder="Gateway" value=""name="Gateway" id="input-element-gateway"></div>
                        <div class="input-element">
                            <input type="number" placeholder="Port" value="0" name="Port" id="input-element-port"></div>

                        </div>
                        <div id="checkbox-el">
                            Incoming connections:<br>
                            <label><input type="checkbox" name="conections" id="conections-el">Allow</label>
                        </div>

                        QoS Mode<br>
                        <label><input type="radio" name="qos-mode-el" id="input-radio-game-first" checked>Game First</label>
                        <label><input type="radio" name="qos-mode-el" id="input-radio-multimedia-first">Multimedia First</label>
                        <button type="submit">Save</button>
                    </div>
    </form>
</body>

</html>

每个值内容都清晰

知道如何使这种绑定起作用吗？我试图在文档和 youtube 视频中找到一些信息，但没有任何帮助。

【问题讨论】：

你用 Postman 测试过吗？
不，但你明白了，我会尝试。
我查过，我想我不知道如何在 java 中解析 post 中的数据
从这里开始，逐步了解其中包含的所有信息：What causes “java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'command' available as request attribute”?。如果您仍然卡在这之后，您可以使用您在该练习中的发现来更新您的问题。
好的，这解释了我的 index.html 文件中的错误，但是发送的模型中的空值呢？

标签： java spring thymeleaf

【解决方案1】：

您没有将表单对象传递给您的百里香模板

这样做 -

@GETMapping("/")
public String getHome(Model model){
model.addAttribute("form", new Form());
return "index";
}

这将向您的 thymleaf 返回一个 Form 对象，然后它可以处理您代码中的数据 --

<form method="post" action="#" th:action="@{/}" th:object="${form}">
      // This will now receive form object
</form>

【讨论】：

但是@Ayush，它还能按预期工作吗？我的意思是主页上的用户有一个带有 json 值的表单，然后当他更改任何值然后将此表单发回时，可以处理此数据，他将获得具有更改值的同一站点？
另外，不应该是 @POSTMapping("/") 而不是 @GETMapping("/") 吗？因为我们使用的是 POST 方法
是的，它还必须有 @POSTMapping("/") 来处理表单数据...流程是这样的 -> @GETMapping("/") 这将在索引中给出一个 Form 对象现在，当您单击提交时，您可以使用 th:field="*{IP}" 存储值的页面，表单对象将由 @POSTMapping("/") 控制器处理....这就是为什么我将获取映射写为发布您已经编写的映射....所以只需包含两者即可正常工作......
程序流程-- 1.在浏览器中输入url，搜索索引页面。 2. 现在 GET MAPPING 将为您提供 INDEX+ 表单对象（您的模型类） 3. 在提交时请求将由 @POST MAPPING 处理
它对你有用吗？那么请接受我的回答?