在向表单添加 <div> 的其他副本时保留表单数据答案

【问题标题】：Persisting Form data while adding additional copies of a <div> to the form在向表单添加 <div> 的其他副本时保留表单数据
【发布时间】：2012-12-16 04:28:04
【问题描述】：

我正在开发 SpringMVC Webapp。我有一个由动态形式组成的视图。表单的动态元素如下图所示：

现在，目前的情况是：

我将变量 ${worksiteCount} 从我的控制器传递到视图（存储在我的 portlet 会话中 - 默认为 1）。

表单提交包含一个在后端处理表单数据的@ActionMapping。
我的页面中有另一个按钮，允许用户在必要时添加额外的工程工作场所 - 额外的工作场所 #1 等）。

点击触发@RequestMapping 更新“worksiteCount”并返回带有附加表单字段的视图。

这个问题是：我在表格中填写的任何数据都会在点击此请求时被删除。

如何在会话中保留这些数据？例如，我应该使用 Ajax 脚本（最好使用 DOJO/Vanilla JS）在 jsp 端异步增加变量 {worksiteCount} 吗？

如果是这样，如何在不刷新视图的情况下执行此操作？
我是 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>

【问题讨论】：

标签： javascript ajax spring jsp dojo

【解决方案1】：

如果我正确理解这一点，并且点击页面上更新表单的按钮的唯一效果，那么有几种方法可以处理这个问题。最简单的可能是：

1) 字段已经在页面上，但隐藏并使用 JS 使它们可见。这样现有的表单数据就已经被保留了。

如果需要使用现有数据从服务器端提取某些数据并在一定程度上改变表单上已经存在的数据的性质，那么这确实是一个提交，应该由控制器处理。

2) 您可以返回所有修改过的原始数据，但是也可以使用新字段，或者使用 AJAX 来获取新数据并结合答案 #1。

【讨论】：