HTMX 将参数传递给 hx-put (或 hx-get) 以搜索一项并填写编辑表单

Question

如何使用 hx-put='http://localhost:0001/site/3' 传递搜索数据的 id，其中 3 是动态值（它是网格中的一行）。我在后端将它与 JavaSprngBoot 一起使用。

                  <tr th:each="model : ${models}">
                        <th scope="col">
                            <button type="button" title="Edit"
                                    class="btn btn-outline-primary"
                                    hx-put=/openai/model
                                    hx-vals=js:{"id":${model.getId()}}
                                    hx-target="body"
                                    hx-trigger="click">
                                <i class="bi-pencil"></i>
                            </button>
                            <button type="button" title="Delete"
                                    class="btn btn-outline-danger">
                                <i class="bi-trash"></i>
                            </button>
                        </th>
                        <th scope="row" th:text="${model.getId()}"></th>
                        <td th:text="${model.getModel()}"></td>
                        <td th:text="${model.getPrice()}"></td>
                        <td th:text="${model.getLimit()}"></td>
                        <td th:text="${model.getCreatedAt()}"></td>
                    </tr>

我需要从编辑表单传递数据，理想情况下它可以工作，当我通过硬编码传递数据时 - 而不是动态传递数据。我后来看到的所有示例都带有硬编码值。太悲伤了（（

Answer 1

我解决了这个问题：我将

name="id" th:value="${model.getId()}"

添加到我的按钮，它适用于我的情况。

                  <tr th:each="model : ${models}">
                    <th scope="col">
                        <button type="button" title="Edit"
                                class="btn btn-outline-primary"
                                name="id" th:value="${model.getId()}"
                                hx-put=/openai/model
                                hx-target="body"
                                hx-trigger="click">
                            <i class="bi-pencil"></i>
                        </button>
                        <button type="button" title="Delete"
                                class="btn btn-outline-danger">
                            <i class="bi-trash"></i>
                        </button>
                    </th>
                    <th scope="row" th:text="${model.getId()}"></th>
                    <td th:text="${model.getModel()}"></td>
                    <td th:text="${model.getPrice()}"></td>
                    <td th:text="${model.getLimit()}"></td>
                    <td th:text="${model.getCreatedAt()}"></td>
                </tr>

讨论中建议的所有答案选项在没有真正的代码片段的情况下看起来毫无用处，只有文档的链接，其中工作答案本身也没有显示。该提案建议更改后端端点，这看起来很荒谬，因为后端有时是与客户端分开开发的，团队可能根本没有任何联系。

HTMX - 一种不需要 JavaScript 的技术？然而，事实证明，如果没有 JavaScript 或添加单独的处理程序，我们就无法解决向端点 URL 添加值这样的基本任务。嗯..