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

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

使用ajax动态添加新项目

1 个答案: