如何从 HTML 表单创建分层 JSON 字符串答案

【问题标题】：How to create a hierarchical JSON string from an HTML form如何从 HTML 表单创建分层 JSON 字符串
【发布时间】：2014-04-22 21:53:35
【问题描述】：

我有一个基本的 HTML 表单，如下所示：

<html>
<form id="myform" action="something.cgi" method="post">
<select name="Container">
<option>container 1</option>
<option>container 2</option>
</select>
<input name="element1" type="text">
<!-- ... -->
</html>

我的目标是让用户进行一些配置并将其保存到一个配置文件中，我可以从另一个应用程序中读取它。我正在寻找一种方法来创建这样的 JSON 字符串

{
"Container 1": 
{
    "Group 1":
    {
        "element1": "value1",
        "element2": "value2"
    }
    "Group 2":
    {
        "element3": "value3",
        "element4": "value4"
    }
}
}

我读到了这个POST data in JSON format，但是使用 JSON.stringify 方法会返回如下内容：

{
    "Container": "Container 1",
    "element1": "value1",
    "element2": "value2",
    "element3": "value3",
    "element4": "value4",
}

我想知道是否有这样做的标准方法？感谢帮助！

【问题讨论】：

您能否扩展示例以显示Container 2 和第 1 组和第 2 组定义...即生成给定 json + Container 2 的 html 是什么
程序如何知道如何对字段进行分组？
@ArunPJohny 问题是没有组的定义。 html 表单由名称和值组成。分组必须由生成 JSON 字符串的代码完成。

标签： jquery html json forms

【解决方案1】：

如果你想使用 javascript，你需要明确地构建它，即：

var finalData = {
    Container:{
        'Group 1':{
            element1:'value1',
            element2:'value2'
        },
        'Group 2':{
            element3:'value3',
            element4:'value4'
        }
    }
};

JSON.stringify(finalData);

但是，如果您需要它是动态的，您需要使用构造函数等变得非常棘手。由于您基于 HTML 表单，我想项目列表是有限的，因此像上面这样的对象文字设置应该可以满足您的需求。

【讨论】：

@PlantTheldea 你说得对，基础将是具有有限元素的 html 表单。如果我必须如此明确，我的想法是发布表单数据“普通”并将其转换为 CGI 应用程序中的 JSON。但是我认为会有一种通用的方式......