javascript - 如何在表单中保存 "add another"数据？

Question

我有一张表格。在此表单中，用户可以填写一些字段，然后单击“添加”。数据被转换为 HTML 元素，然后表单被(部分)清除，以便他可以输入更多数据。

我正在尝试弄清楚当他单击“添加”时如何存储该数据，以便稍后可以提交。我应该序列化(JSON？还是有更紧凑的表示形式——不需要人类可读)并将其存储在隐藏字段中？如果是这样，当他添加第二个对象时会发生什么？我反序列化旧数据，然后将两个对象重新序列化在一起？看起来效率很低。

我是否会以某种方式克隆表单，隐藏它，并更新所有 name 属性，这样它们就不会发生冲突，然后在尝试将这些愚蠢的东西解析为数组时自杀？

最好的方法是什么？

Answer 1

创建一个隐藏字段，其名称中的某处带有增量数字后缀。

var fields = $('input[type=hidden][name^=foo_]', form).length;
$('<input type="hidden" name="foo_' + (fields + 1) + '">').val(val).appendTo(form);

以通常的方式提交，jQuery.serialize()等等。

最后在服务器端进行相应的拦截(半伪)。

for (var i = 0; i < Integer.MAX_VALUE; i++) {
    var value = request.getParameter("foo_" + i);
    if (value == null) break;
    // ...
}

请注意，也允许多个具有相同名称的隐藏字段，但您依赖于所使用的服务器端技术，它们是否会按照查询字符串中出现的相同顺序从请求中收集(HTTP/HTML 规范已经要求它们在 HTTP 查询字符串中的出现顺序必须与它们各自的 HTML 输入元素在 DOM 树中出现的顺序相同。据我所知，PHP 和 Servlet 正确地执行了此操作(即参数值数组中的值与 HTTP 查询字符串中出现的顺序相同)。