使用 ajax 动态添加新项目

Question

我有一段使用 Thymeleaf 的 html 代码：

<form id="form" action="/create" th:action="@{/create}" th:object="${form}">

   <input type="text" th:field="*{title}"/>

   <div th:each="item, itemInfo : *{items}">
      <div>
         <input type="text" th:field="*{items[__${itemInfo.index}__].text}" />
      </div>
   </div>

   <button id="addNewBtn" onClick="add()"/>

   <button type="submit" value="Create"/>

</form>

form 对象有一个名为“items”的集合。单击“addNewBtn”按钮会调用 javascript 方法“add”，其中必须包含可以将新项目添加到集合中的代码（这是我的问题 - 我不知道这段代码的样子）。 这里有什么方法可以使用 ajax 将新项目添加到集合中吗？同样重要的是，新添加的项目必须与名为“文本”的字段绑定。 或者可能还有另一种解决方案？基本上，我需要创建带有标题的对象（在提交表单之后）和许多带有文本的项目，这些项目可以由用户动态添加。

提前致谢

Answer 1

您可以通过提供“索引”参数从服务器调用（使用 ajax）HTML 行模板。