使用带有嵌套对象的 javascript 和 json 发布表单

Question

我有一个具有以下结构的 html 表单：

<input type="text" name="title" />
<input type="text" name="persons[0].name" />
<input type="text" name="persons[0].color" />
<input type="text" name="persons[1].name" />
<input type="text" name="persons[1].color" />

我想把它序列化成下面的json：

{
  "title": "titlecontent",
  "persons": [{
      "name": "person0name",
      "color": "red"
    },
    {
      "name": "person1name",
      "color": "blue"
    }
  ]
}

请注意，人数可能因情况而异。

html表单的结构可以改变，但是提交的json的结构不能改变。

这怎么做最简单？

Answer 1

嘿，使用 jQuery 和 jQuery JSON plugin，我能够做到以下几点： 我不得不稍微改变一下你的 html：

<div id="Directory">
    <input type="text" class="title" />
    <span class="person 0">
        <input type="text" class="name" />
        <input type="text" class="color" />
    </span>
    <span class="person 1">
        <input type="text" class="name" />
        <input type="text" class="color" />
    </span>
</div>

然后我可以使用以下代码创建您的 JSON 数组：

var Directory = {};
Directory.title = $("div#Directory input.title").val();
Directory.persons = [];
$("div#Directory span.person").each(function() {
  var index = $(this).attr("class").split(" ")[1];
  Directory.persons.push({
    name: "person" + index + $(this).children("input.name").val(),
    color: $(this).children("input.color").val(),
  });
});
alert($.toJSON(Directory));

这个 http://stackoverflow.com/questions/492833/getting-correct-index-from-input-array-in-jquery 也有点帮助。不幸的是，我无法使用您的特定属性集复制他们的选择方法。

希望我没有做你的功课；）上面的 URL 中有一个空格，因为我没有足够的声誉点来放置多个超链接。

这是你的最终 JSON：

{
  "title": "abc",
  "persons": [{
    "name": "person0englishman",
    "color": "pink"
  }, {
    "name": "person1indian",
    "color": "brown"
  }]
}

Answer 2

依赖：

• locutus (npm install locutus)
• jQuery

代码：

var parse_str = require('locutus/php/strings/parse_str');
parse_str($("#form ID").serialize(), var result = {});
console.log(result);