jquery - 如何从 HTML 表单创建分层 JSON 字符串

标签 jquery html json forms

我有一个基本的 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",
}

我想知道是否有一个标准的方法可以做到这一点?感谢帮助!

最佳答案

如果您想使用 JavaScript,则需要显式构建它,即:

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

JSON.stringify(finalData);

但是,如果您需要它是动态的,则需要对构造函数等进行相当棘手的处理。由于您基于 HTML 表单,我想项目列表是有限的,因此像上面这样的对象文字设置应该可以满足您的需求。

关于jquery - 如何从 HTML 表单创建分层 JSON 字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22458668/

相关文章:

javascript - .eq 返回所有选择

html - 左右边距不相等,这是为什么

AJAX 结果问题 - Data.Results 未定义

c# - WCF 服务和 JavaSerializer 解码器中的日期问题

javascript - 使用每个函数从一个输入复制值并将值粘贴到第二个输入

javascript - 正则表达式匹配不带引号的字符串,但不匹配 CSV 中的数字

javascript - JQuery 中具有相同 ID 的不同 Div 返回相同数据

javascript - 获取子输入元素值更新

javascript - 调整大小功能的问题,导航打开然后单击关闭

javascript - 使用下拉列表动态更改 href 属性的问题