Question

我在表单中有多个输入标记，我需要准备要通过Ajax请求发送的所有值。以下是输入字段的示例：

<form>
  <input name="foo" value="1">
  <input name="foo1" value="1">
  <input name="bar[]" value="2">
  <input name="bar[]" value="2">
  <input name="fooBar[a][]" value="3">
  <input name="foobar[b][]" value="3">
</form>

预期结果：

{
  foo : "1",
  foo1 : "1",
  bar : ["2", "2"],
  fooBar : { a : ["3"], b : ["3"]}
}

或：

  {
    foo : "1",
    foo1 : "1",
    "bar[0]" : "2",
    "bar[1]" : "2",
    "fooBar[a][0]" : "3",
    "fooBar[b][0]" : "3"
  }

我不知道如何以及从何处开始构建我的函数，所以也许任何人都有一个想法，并且可以给我一个关于如何在普通javascript中完成此操作的提示。

Answer 1

感谢您的想法。我只是弄清楚我到底想要做什么，我以一种简单的方式解决了这个问题。基本上我需要通过Ajax请求发送值，所以我只需要一个QueryString，所以这是我的简单解决方案，它似乎完全符合我的需要：

var elements = form.elements;

var data;

for(var i = -1, j = elements.length; ++i < j;)
{
  if(elements[i].name)
  {
    data += "&" + elements[i].name + "=" + encodeURIComponent(elements[i].value);
  }
}

Answer 2

它并不完美，它是你的两个预期输出之间的混合，但它很简单，希望你能理解正在发生的事情。

function serializeForm(frm) {
    var ret = {};
    [].forEach.call(frm.elements, function (element) {
        if (ret.hasOwnProperty(element.name)) {
            if (!Array.isArray(ret[element.name])) {
                ret[element.name] = [ret[element.name]];
            }
            ret[element.name].push(element.value);
        } else {
            ret[element.name] = element.value;
        }
    });
    return ret;
}

console.log(serializeForm(document.forms.frm));

输出

bar[]: ["2","2"]
foo: "1"
foo1: "1"
fooBar[a][]: "3"
foobar[b][]: "3"

http://jsfiddle.net/rlemon/FFMb7/你可以在这里看到一个演示。

要拆开foobar的东西（假设大写字母是一个错字），你需要做更多的工作，并可能使用正则表达式拉开数组的第一部分和括号中的值。我甚至不打算为你尝试，因为我讨厌正则表达式：P所以希望这个输出会起作用。

更新：如果您实际上是在尝试序列化http提交表单，那么您应该使用更标准的表单。 form serialize javascript (no framework)如此处所述。

从表单中捕获所有输入值

2 个答案: