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，希望您能在控制器中获得值..

标签： javascript java html thymeleaf

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

是的，以前尝试过的迹象 :)
好的，清理干净了，还有其他想法吗？