0

我在一个表单中有多个输入标签，我需要准备所有要通过 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 来完成。

4

2 回答 2

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);
  }
}
于 2013-04-16T19:20:58.140 回答
0

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

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 提交，那么您应该使用更标准的表单。如此处所述，形成序列化 javascript（无框架）。

于 2013-04-16T18:44:02.860 回答