通过 javascript 以 HTML Thymeleaf 形式发送 HashMap 密钥答案

【问题标题】：Sending HashMap key through javascript in HTML Thymeleaf form通过 javascript 以 HTML Thymeleaf 形式发送 HashMap 密钥
【发布时间】：2020-05-05 15:32:15
【问题描述】：

我是前端新手，有一件棘手的事情想要解决。我在后端使用 MVC 模式和 HTML/Thymeleaf 和 Java。
我创建了一个简单的表单，它可以从 Map 中动态添加和删除项目。这些操作本身是在后端进行的。当您想添加或删除项目时，您只需使用带有标志situationCreateSubmit=false 的提交表单的javascript。正在通过表单的模型如下所示：

public class SituationRequestModel {
    @Valid
    private SituationModel situation;
    private Boolean situationCreateSubmit=true;
    private Long addInstitutionId;
    private Long removeInstitutionId;
    private Long templateDocumentId;
    private String fileName;
    private byte[] templateDocument;
}

所以在后端，首先situationCreateSubmit 字段会检查此表单是否要保存到数据库。如果它为假，则在地图上添加/删除项目并返回 HTML 页面。地图本身是SituationModel的字段。

我设法将项目添加到地图，但我在删除项目时遇到了问题。我想在一个表中有一个简单的行，其值来自地图和链接/按钮 REMOVE 以删除这个特定的行。

我想在 Remove 字段上创建带有“onclick”之类的 jQuery 函数，以将地图的这个特定键分配给 removeInstitutionId，将 situationCreateSubmit 设置为 false 并将其与简单提交一样的帖子发送到 控制器。

在 HTML 表单中，我使用 foreach 循环遍历地图：

<table class="table table-dark">
     <tbody>
        <tr class="col-12 item-dark" th:each="institution,iter :*{situation.institutions}">
        <td th:text="${institution.value.name}"></td>
        <td><a id="removeinstitution" class="nav-link active"  th:field="${institution.key}" >Remove</a>
        </tr>
     </tbody>
</table>

我写的JS看起来像：

$(document).ready(function() {
$("#removeinstitution").a
        select: function(event, ui) {
            $("#removeInstitutionId").val(ui.item.key);
            $("#situationCreateSubmit").val(false);
            $( "#situation-create" ).submit();
        }
    });

我知道它不能工作，但我不知道如何将映射键传递给 JS 并将其设置为 removeInstitutionId 字段。我知道在 Thymeleaf 中我们可以使用像 __institution.key__ 这样动态生成特定值的东西，但我不知道该怎么做。

信息我不想改变工作方式-> 在前端使用地图进行操作。我想在后端拥有地图操作逻辑。
提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery html forms thymeleaf

【解决方案1】：

我已经解决了我的问题。
使用 thymeleaf 我们可以为表中的每一行动态生成 id。就我而言，我将 HashMap key 作为 id 值：

<table class="table table-light mt-1">
    <tbody>
    <tr class="col-auto table-active" th:each="institution,iter:*{situation.institutions}">
    <td th:text="${institution.value.name}"></td>
    <td><a th:id="${institution.key}" href="#" class="col-auto remove-institutioncss">Remove</a>
    </td>
    </tbody>
</table>

第二个功能放在 JS 中：

$( ".remove-institution-css" ).click(function() {
  $("#removeInstitutionId").val($(this).attr("id"));
  $("#situationCreateSubmit").val(false);
  $( "#situation-create" ).submit();
});

这让我可以：
1）将HashMap key（表id）赋值给对象变量removeInstitutionId
2) 将 situationCreateSubmit 标志设置为 false - 后端的信息表明表单尚未准备好保存。
3) 提交表格。

提醒：我为什么要这样？
1）我想在后端进行完全的 HashMap 操作 2）我是 HTML/Thymeleaf 的新手
希望它会帮助任何人。
问候

【讨论】：