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

【问题标题】：How to handle child elements having same names but under different parent nodes in HttpRequest?如何处理HttpRequest中具有相同名称但在不同父节点下的子元素？
【发布时间】：2013-06-25 21:19:27
【问题描述】：

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

澄清：

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

【问题讨论】：

标签： html forms httprequest

【解决方案1】：

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

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

<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 反模式。

【讨论】：

如果我必须在服务器端获取 HTML DOM 结构，有什么替代 HTTP 请求的方法吗？
您想将 HTML DOM 或表单值发送到服务器吗？请详细说明您的问题以及为什么不能使用不同的名称。
实际上我有很多克隆的 div 有多个输入字段。 div 有不同的名称，但输入字段的 ID 在这些 div 中是相同的。我在想，如果我可以在服务器端使用父 div id 以某种方式区分子名称，那会容易得多。否则，我将不得不添加额外的 javascript 代码来重命名这些子节点，这样它们就会有所不同。
您能否在您的问题中添加此说明？其他人可能有更好的想法。或者你可以改变我的代码：而不是随机后缀使用这一行：this[i].name+= "_"+this[i].parentNode.id
我已按照您的要求对问题进行了澄清。我目前在所有子节点名称前加上它们的父 ID。但我一直在寻找更好的方法，比如，我的意思是在 DOM 中我们已经知道它们是不同的，因为它们在不同的父级下，但是我们无法在 httprequest 中保持这种隔离。