Question

也许标题比自己的问题更令人困惑。这是我的情况，Thymeleaf我展示了一张包含客户名单的表格。它显示Name，LastName，一个删除它的按钮和一个显示它状态的复选框（如果用户处于活动或非活动状态）

<table class="table">
<thead>
<tr>
    <th>Name</th>
    <th>Last Name</th>
</tr>
</thead>
<tbody>
<tr th:each="client : ${clientList}">
    <td th:text="${client.name}"></td>
    <td th:text="${client.lastName}"></td>
    <td>
        <a th:href="@{/delete_client/} + ${client.id}" class="btn btn-danger">Delete</a>
    </td>
    <td>
        <input type="checkbox" name="my-checkbox" th:checked="${client.state} ? 'checked'">
    </td>

</tr>
</tbody>

到目前为止，没问题。但是，当用户点击复选框时，我不知道该怎么做是通信控制器，以便禁用或启用该特定客户端。

类似按钮删除客户端所做的事情，但改变它的状态。

我被告知要使用AJAX，但不知道如何。

谢谢！

Answer 1

你可以避免使用ajax。对于类似删除的效果，您可以将以下步骤应用于包含复选框的td元素：

结束form标记
在action中提供正确的form属性。该操作是一个端点，用于处理客户端状态的更新（类似于/delete_client/）
在复选框中提供onclick="submit();"属性，当用户点击它时会触发提到的端点

E.g。

<td>
    <form th:action="@{/switch_client_state/} + ${client.id}">
        <input type="checkbox" name="my-checkbox" onclick="submit();" th:checked="${client.state} ? 'checked'">
    </form>
</td>

SpringBoot + Thymeleaf dinamic表与行中的复选框与Controller通信

1 个答案: