Java 使用静态值提交Spring-eleaf表单

我正在开发一个Java应用程序，通过使用Spring和Thymeleaf，我希望能够向系统中添加一个特定的串行设备

我有一个页面，向用户显示连接到计算机的所有串行设备，还有一个简单的按钮，允许用户将特定设备添加到系统中，如下所示：

现在，当我按下上面的蓝色按钮时，我所期望的是对URL发出POST请求，并发送一个DTO，其中包含在每个列中看到的所有信息

问题是，我不知道如何发送带有该数据的DTO，因为我无法使用这些数据设置对象字段，因为我的尝试如下所示：

        <tbody>
            <tr th:each="serialdevice : ${SerialDevices}">
                <td><span th:text="${serialdevice.getDescriptivePortName()}">Serial Port ID</span></td>
                <td><span th:text="${serialdevice.getPortDescription()}">Serial Port Description</span></td>
                <td><span th:text="${serialdevice.getBaudRate()}">Baud Rate</span></td>
                <td>
                    <form th:action="@{/serialdevices/add/submit}" th:object="${SerialDeviceDTO}" method="post">
                        <input hidden type="text" th:attr="value=${serialdevice.getDescriptivePortName()}" th:field="*{descriptivePortName}" class="form-control">
                        <input hidden type="text" th:field="*{portDescription}" th:value="${serialdevice.getPortDescription()}" class="form-control">
                        <input hidden type="text" th:field="*{baudRate}" th:value="${serialdevice.getBaudRate()}" class="form-control">
                        <button type="submit" class="btn btn-primary">Add Serial Device</button>
                    </form>
                </td>
            </tr>
        </tbody>

正如在第一条中提到的，我打印的值都是未初始化的，因此我打印null或0

编辑2

---

更新HTML代码，以符合M.Deinum关于将span标记更改为输入标记的建议。

经过一段时间，我对我的代码进行了修改，并搜索了其他答案，例如我能够找到如何解决问题的方法，但我仍将搜索我最初的方法不起作用的原因

我所做的是修复我的问题，并且能够获得类似于下图的东西，就是利用Thymeleaf拥有的

th:data

，并将我想要发送给Spring控制器的值以及我提供给用户的适当参数存储在该属性中（串行端口ID、串行端口说明和波特率）

如下所示，我使用了前面提到的

th:data

属性，并在其中存储了如果用户按下“添加串行设备”按钮，我希望发送给控制器的值

这背后的原因是，当我尝试使用

th:value

甚至

th:attr=value…

时，这些都不会像页面加载完成时那样工作，输入元素的

value

属性将初始化为null（对于文本）或0（对于数字）

---

我希望这个答案能够帮助将来面临与我类似问题的人，如果有人能找到一种更优雅的方式来完成所有这些，而不需要使用Javascript，并且只需让Thymeleaf在发送给客户端之前完成HTML的所有呈现，我将非常感谢，因为我不知道我不认为这是实现预期结果的正确或最好的方法。

经过一段时间的混乱，我的代码和搜索其他答案，例如我能够找出如何解决我的问题，但我仍将搜索我最初的方法不起作用的原因

我所做的是修复我的问题，并且能够获得类似于下图的东西，就是利用Thymeleaf拥有的

th:data

，并将我想要发送给Spring控制器的值以及我提供给用户的适当参数存储在该属性中（串行端口ID、串行端口说明和波特率）

如下所示，我使用了前面提到的

th:data

属性，并在其中存储了如果用户按下“添加串行设备”按钮，我希望发送给控制器的值

这背后的原因是，当我尝试使用

th:value

甚至

th:attr=value…

时，这些都不会像页面加载完成时那样工作，输入元素的

value

属性将初始化为null（对于文本）或0（对于数字）

---

我希望这个答案能够帮助将来面临与我类似问题的人，如果有人能找到一种更优雅的方式来完成所有这些，而不需要使用Javascript，并且只需让Thymeleaf在发送给客户端之前完成HTML的所有呈现，我将非常感谢，因为我不知道我不认为这是实现预期结果的正确或最佳方式。

#1单击按钮时，此端点是否名为/serialdevices/add/submit？#2能否与我们共享此控制器/serialdevices/add/submit？#3是否可以调试或仅在/serialdevices/add/submit中打印收到的值？您没有设置字段，而是设置了ng spans。spans不是输入元素，因此不是提交表单的一部分。@JRichardsz我编辑了该问题以回答您的问题，希望我没有忘记任何事情。@M.Deinum我尝试将span元素更改为属性为“type=hidden”的输入元素为了不弄乱表格，但我仍然没有成功地将值发送到控制器。我将继续尝试弄乱输入标记，但如果你能给我举个例子或理论解释，说明为什么我无法完成这项工作，我将非常感谢。你需要输入，否则表单中没有任何内容，也没有任何内容将提交hing（这就是HTML表单的工作方式！）。也只能使用

th:field

not

th:value

。查看您在

th:value

中使用的内容，您的

th；对象

应该引用

serialDevice

而不是

ServiceDeviceDTO

。#1当您单击按钮时，该端点是否名为/serialdevices/add/submit？#2能否与我们共享此控制器/serialdevices/add/submit？#3您可以调试或只是在/serialdevices/add/submit中打印接收到的值吗？您不是在设置字段，而是在设置跨距。跨距不是输入元素，因此不是提交表单的一部分。@JRichardsz为了回答您的问题，我编辑了这个问题，希望我没有忘记任何事情。@M.Deinum I tried将span元素更改为属性为“type=hidden”的输入元素，以避免弄乱表，但我仍然未能将值正确发送到控制器。我将继续尝试弄乱

    @RequestMapping(value = "/submit", method = RequestMethod.POST,
            consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE, MediaType.APPLICATION_JSON_VALUE, MediaType.APPLICATION_XML_VALUE},
            produces= {MediaType.TEXT_PLAIN_VALUE})
    public String submit(AddSerialDevice dto) {
        System.out.println(dto.getDescriptivePortName());
        System.out.println(dto.getPortDescription());
        System.out.println(dto.getBaudRate());
        return null;
    }

        <tbody>
        <tr th:each="serialdevice : ${SerialDevices}">
            <td><span th:text="${serialdevice.getDescriptivePortName()}">Serial Port ID</span></td>
            <td><span th:text="${serialdevice.getPortDescription()}">Serial Port Description</span></td>
            <td><span th:text="${serialdevice.getBaudRate()}">Baud Rate</span></td>
            <td>
                <form th:action="@{/serialdevices/add/submit}" th:object="${SerialDeviceDTO}" method="post">
                    <input hidden type="text" th:data1="${serialdevice.getDescriptivePortName()}" th:field="*{descriptivePortName}" class="form-control">
                    <input hidden type="text" th:data1="${serialdevice.getPortDescription()}" th:field="*{portDescription}" class="form-control">
                    <input hidden type="text" th:data1="${serialdevice.getBaudRate()}" th:field="*{baudRate}" class="form-control">
                    <button type="submit" th:onclick="javascript:setValueAttribute(this.parentElement);" class="btn btn-primary">Add Serial Device</button>
                </form>
            </td>
        </tr>
    </tbody>

<script>
function setValueAttribute(element) {
    var children = element.childNodes;
    children.forEach(child => setValue(child));
}

function setValue(element) {
    if(element.tagName === "INPUT") {
        element.setAttribute("value", element.getAttribute("data1"));
    }else{
        console.log(element.tagName)
    }
}