在服务器端处理动态表单

Question

我在这里看到了很多关于在 jQuery 或其他 javascript 库中实现动态表单的问题，我想我设法为我的测试目的设置了一个动态表单。

我的问题是命名表单字段并在服务器端处理它们的最佳做法是什么。

我正在尝试实现一个类似联系人的表单，其中用户可以添加多个电话号码（和类型）以及多个地址（和类型）类似于下面的代码，这是将动态复制的代码块.

<div id="phones">
<label>Phone Number</label><input type="text" name="phone1" value="" />
<label>Type</label><input type="text" name="type1" value="" />
</div>

然后我会有一个 +/- 链接或按钮来添加另一部电话或删除一部电话。当我提交表单时，处理名称/类型组合的最佳方法是什么 我应该使用像上面指出的名称和像 phone1 / type1 这样的 id 后缀，还是应该使用像 phone[] / type[] 这样的数组命名并匹配根据索引在服务器上配对。

我正在使用 java（不确定它是 java 还是 php 或其他是否会有所不同）但是这样做的最佳实践是什么。

谢谢

Answer 1

带索引的方括号似乎是大多数框架所期望的，但它确实完全取决于您的框架。在 Java 世界中，考虑到大约有一百万种不同的框架，您必须从您的框架所期望的开始，并适当地调整您的 Javascript 代码。

我熟悉的唯一能够知道答案的 Java 框架是 Stripes，它需要方括号。如果你的 bean 有一个属性

private List<Address> addresses;
public List<Address> getAddresses() { return addresses; }
public void setAddresses(final List<Addresses>) { this.addresses = addresses; }

那么输入将需要“addresses[0].street1”、“addresses[0].street2”等名称。当您为新地址添加新块时，您将拥有与“相同的字段” 1”而不是“0”。

然而，不同的 Java 框架可能以完全不同的方式做事。

Answer 2

在您的情况下，您应该专门为该字段编号。不要使用数组命名约定，这在过去让我很头疼。

如果您使用数组，当缺少参数时，您将面临类型和电话值不匹配的风险。有些浏览器会直接忽略空值。

为了帮助服务器检索所有参数，我通常将字段数放在隐藏字段中。因为表单看起来像这样，

<div id="phones">
<input type-"hidden" name="count" value="3" />
<ul>

<li>
<label>Phone Number</label><input type="text" name="phone1" value="" />
<label>Type</label><input type="text" name="type1" value="" />
</li>
<li>
<label>Phone Number</label><input type="text" name="phone2" value="" />
<label>Type</label><input type="text" name="type2" value="" />
</li>
<li>
<label>Phone Number</label><input type="text" name="phone3" value="" />
<label>Type</label><input type="text" name="type3" value="" />
</li>
</ul>
</div>