Добавлены новые элементы dynamycally с AJAX

Question

У меня есть кусок кода HTML с использованием Thymeleaf:

<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> 

форма объекта имеет коллекцию под названием «элементы». Нажатие кнопки «addNewBtn» вызывает метод javascript «add», где он должен содержать код, который может добавить новый элемент в коллекцию (и это моя проблема здесь - я не знаю, как выглядит этот код). Можно ли добавить новый элемент в коллекцию с помощью ajax? Также важно, чтобы новый добавленный элемент привязывался к полю под названием «текст». Или, возможно, есть другое решение? В принципе, мне нужно создать объект (после формы отправки) с заголовком и множеством элементов с текстом, который пользователь может добавить динамически.

Заранее спасибо

Answer 1

Вы можете позвонить (с помощью AJAX) в HTML-шаблон строки с сервера, давая параметр «индекс».