javascript - の追加コピーを追加しながらフォームデータを永続化するフォームへ

Question

私はSpringMVC Webappに取り組んでいます。動的フォームで構成されるビューがあります。フォームの動的要素を以下に示します。

さて、現在のシナリオは次のとおりです。

${worksiteCount}コントローラーからビューに 変数を渡します (ポートレット セッションに保存され、デフォルトは 1 です)。

フォーム送信は、バックエンドでフォーム データを処理する @ActionMapping で構成されます。
ページに別のボタンがあり、ユーザーは必要に応じて追加のエンジニアリング ワークサイトを追加できます (追加のワークサイト #1 など)。

クリックすると、「worksiteCount」を更新し、追加のフォーム フィールドを含むビューを返す @RequestMapping がトリガーされます。

これに関する問題は次のとおりです。フォームに入力したデータは、このリクエストをクリックすると削除されます。

セッション内でこのデータを保持するにはどうすればよいですか? たとえば、Ajax スクリプト (できれば DOJO/Vanilla JS を使用) を使用して、変数 {worksiteCount} を jsp 側で非同期に増やす必要がありますか?

もしそうなら、ビューを更新せずにどうすればいいですか?
私は Ajax-Dojo (dojo.xhrGet/post など)、Spring フレームワークの初心者です。親切に助けてください。

<c:if test="${worksiteCount>1}">
            <c:set var="i" value="0"/>
            <c:forEach var="worksiteAddresses" items="${worksiteAddresses}"> 
            <c:set var="i" value="${i+1}"/>

                <c:if test="${worksiteCount>1}">
                <div class="row">
                <h2 id="worksiteAddress${i}" name="worksiteAddress${i}">Additional Worksite<span>${i}</span></h2>
                </div>
                </c:if>

             <div class="row">
                <div id="f-addr1" class="field">
                    <label>Address1<span><tag:requiredIcon/> </span></label>
                    <input class="" type="text" value="${worksiteAddresses.companyAddressLine1}" id="addressLine1${i}" name="addressLine1${i}" onblur="validateControl('addressLine1${i}');"/>
                </div>
                <div id="f-addr2" class="field">
                    <label>Address2</label>
                    <input class="" type="text" value="${worksiteAddresses.companyAddressLine2}" id="addressLine2${i}" name="addressLine2${i}" />
                </div>              
                <br class="clear" />
            </div>
            <div class="row">
                <div id="f-city" class="field">
                    <label>City<span><tag:requiredIcon/> </span></label>
                    <input class="" type="text" name="city${i}" id="city${i}" value="${worksiteAddresses.companyCity}" onblur="validateControl('city${i}');" />
                </div>
                <div id="f-zip" class="field">
                    <label>Zip<span><tag:requiredIcon/> </span></label>
                    <input class="" type="text" name="zip${i}" id="zip${i}" value="${worksiteAddresses.Zipcode}" onblur="validateZipControl('zip${i}',${i});" />
                </div>
                <br class="clear" />
            </div>

            </c:forEach>
        </c:if>