Question

我有相同名称的子元素，但它们位于HTML表单中具有不同名称的不同父节点下。当我提交此表单时，如何从服务器端的HttpRequest对象访问这些子属性值？

澄清：

实际上我有很多克隆的div，它们有多个输入字段。 Div具有不同的名称，但输入字段的ID在这些div中是相同的。我在想，如果我能以某种方式在服务器端使用它们的父div来区分子名，那就容易多了。否则，我将不得不添加额外的javascript代码来重命名这些子节点，以便它们不同。

Answer 1

如果使用HTTP请求发送表单，则只发送命名元素值（不是HTML DOM），后者会先覆盖。所以使用不同的名称。

您可以使用随机名称mangler之类的东西。如果您有这样的表格

<form id="test">
  <input name="foo"/>
  <input name="bar"/>
  <input name="foo"/>
  <input type="submit"/>
</form>

您可以在表单发送之前为每个变量添加随机后缀

<script>
  var mangled = false;
  document.getElementById("test").onsubmit = function(e) {
    // add suffix on first submit
    if(!mangled) for(var i=0; i<this.length; ++i) {
      this[i].name+= "_"+Math.floor(Math.random()*99999);
    }
    mangled = true;
    e.preventDefault(); // disable default submit

    // send form using XHR
    var xhr = new XMLHttpRequest();
    xhr.open("POST","yourserver",true);
    xhr.send(new FormData(this)); // send the form data to the server
  }
</script>

服务器将收到以下内容：

foo_88428=a&bar_69516=b&foo_84602=c

在服务器上，您可以删除每个变量的_[number]后缀，并按照您喜欢的方式处理重复项。

上面的字符串是原始发布数据（谷歌它用于您的服务器语言支持）。从技术上讲，如果某个名称被插入两次，您可以处理数据，例如

foo=a&bar=b&foo=c

但我不推荐它，因为它是race hazard反模式。

如何在HttpRequest中处理具有相同名称但在不同父节点下的子元素？

1 个答案: