java使用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>

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

提前谢谢

Answer 1

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