Question

我有一张表格。在此表单中，用户可以填写几个字段，然后单击“添加”。数据变为HTML元素，然后（部分）清除表单，以便他可以输入更多数据。

我正在尝试弄清楚如何在点击“添加”时存储该数据，以便以后可以提交。我应该序列化（JSON？还是有更紧凑的表示 - 不需要人类可读）并将其存储在隐藏字段中？如果是这样，当他添加第二个对象时会发生什么？我反序列化旧数据，然后将2个对象重新序列化？似乎效率低下。

我是否以某种方式克隆表单，隐藏它并更新所有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查询字符串中出现的参数值数组中的顺序相同）。

Answer 2

这在某种程度上取决于服务器对数据的期望，而这又取决于您在服务器端使用的语言/框架。如果您的服务器可以轻松处理具有相同名称的多个字段，那么它非常简单。（这个例子使用jQuery来简化。）

function onAddMore() {
    var $form = $("#myForm");
    var $foo = $form.find("[name=foo]").eq(0); // the first (original) foo

    $form.append($foo.clone())
    $foo.val("");
}

当用户正常提交表单时，您的查询将类似于foo=bar&foo=baz&foo=quux。

以下是如何迭代Python CGI中的值的示例。

form = cgi.FieldStorage()

for foo in form.getlist("foo"):
    # do something with foo

或者在PHP中（请注意，对于PHP，the field must be named foo[]）。

for ($_GET["foo"] as $foo) { // $_POST would work the same way, of course
    // do something with $foo
}

如何在表单中保存“添加其他”数据？

2 个答案: