Thymeleaf + jQuery ，如何正确添加 th:field="*value"

Posted 2023-03-05

【中文标题】Thymeleaf + jQuery ，如何正确添加 th:field="*value"

【英文标题】：Thymeleaf + jQuery , how to properly add th:field="*value"Thymeleaf + jQuery ，如何正确添加 th:field="*value"

【发布时间】：2019-02-20 07:37:45

【问题描述】：

我正在努力解决一个问题。我正在尝试将行动态添加到我的表单中。我的第一行（静态）表单工作正常，但是当我添加另一个表单时，正在添加表单，但我无法获得任何值，就像它会保持空白一样。请帮忙

好的，这是我的表单：

<h2>Risk management</h2>
    <table class="table table-striped" id="myTable">
        <tr>
            <th>Type of work</th>
            <th>Type of threat</th>
            <th>Person</th>
            <th>Intial risk</th>
            <th>Countermeasure</th>
            <th>Final risk</th>
        </tr>
        <tr>

            <th><input type="text" th:field="*typeOfWork" /> </th>
            <th><input type="text" th:field="*typeOfThreat" /> </th>
            <th><input type="text" th:field="*person" /> </th>
            <th><input type="text" th:field="*initialRisk" /> </th>
            <th><input type="text" th:field="*countermeasure" /> </th>
            <th><input type="text" th:field="*finalRisk" /> </th>

        </tr>
        <button type="button" onclick="addFields()">Insert new row</button>
    </table>

当我使用 jQuery 添加行时，添加了行，但 Thymeleaf 没有将表单中写入的值发送到模型

<script th:inline="javascript">

function addFields()

    document.getElementById("myTable").insertRow(-1).innerhtml = 
        '                <th><input type="text" th:field="*typeOfWork" /> </th>\n' +
        '                <th><input type="text" th:field="*typeOfThreat" /> </th>\n' +
        '                <th><input type="text" th:field="*person" /> </th>\n' +
        '                <th><input type="text" th:field="*initialRisk" /> </th>\n' +
        '                <th><input type="text" th:field="*countermeasure" /> </th>\n' +
        '                <th><input type="text" th:field="*finalRisk" /> </th>';

【问题讨论】：

我也面临同样的问题。请建议我如何使用 jquery 从新添加的文本字段中获取值..

从 javascript 中删除 th:field 并使用 name 代替 th:field，希望您能在控制器中获得值..

【参考方案1】：

Thymeleaf 在server 上编译，而Jquery 在client 上处理。用户在client 端收到的所有信息是html 中不包含Thymeleaf。您不能使用JQuery 添加包含Thymeleaf 代码的行。

这里的解决方案是使用Ajax 调用server 来检索新行的数据。

【参考方案2】：

我认为您应该使用表的“容器”ID 删除该 DIV。

【讨论】：

是的，以前尝试过的迹象 :)

好的，清理干净了，还有其他想法吗？