从 thymeleaf 向 javascript 发送参数答案

【问题标题】：Sending parameters to javascript from thymeleaf从 thymeleaf 向 javascript 发送参数
【发布时间】：2018-05-25 13:38:18
【问题描述】：

我正在编写一个基于 Thymeleaf 的项目，但遇到了这样一个问题。我有一个应该在后端发送的表格。但在发送之前，我必须使用 JS 的 hepl 对页面执行一些计算。所以我决定做这样的事情：

   <form th:action= "'javascript:sendSearchRequest('this.form', '+${currentPage}+', '+${selectedPageSize}+')"

所以在这种情况下似乎是不可能的，因为无法处理this.form。然后我尝试了另一种方法：

 <button id="searchButton" class="btn btn-default" type="submit"
                        onclick="return sendSearchRequest(this.form, this.currentPage, this.selectedPageSize)">Search
 </button>

这次我不能使用 currentPage 和 selectedPageSize 参数，因为我只能从 thymleaf 运算符中调用它们，例如 th:onclick。

所以这是我的问题：在我的示例中，是否可以同时发送表单参数和模型中的一些参数，例如 ${currentPage}

【问题讨论】：

标签： javascript spring-mvc model-view-controller thymeleaf

【解决方案1】：

您可以将它们作为字段添加到表单中（并在 sendSearchRequest 中访问它们）。

<input type="hidden" th:value="${currentPage}" id="currentPage" />
<input type="hidden" th:value="${selectedPageSize}" id="selectedPageSize"  />

或作为表单标签上的数据属性。

<form th:data-current-page="${currentPage}" th:selected-page-size="${selectedPageSize}" ...

我认为你也可以修复你的按钮点击，看起来像这样：

<button id="searchButton" class="btn btn-default" type="submit" th:onclick="|return sendSearchRequest(this.form, ${currentPage}, ${selectedPageSize})|">
    Search
</button>

【讨论】：