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

依赖关系：

locutus（npm install locutus）
的jQuery

代码：

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

Answer 2

嘿男人用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"}]}

使用javascript和json与嵌套对象发布表单

2 个答案: