//假设表单如下所示
<form id="myform">
<input name="foo" value="parent"/>
<input name="foo.cat.bar" value="child1"/>
<input name="foo.cat.biz" value="child2"/>
<input name="foo.cat.biz.dog.bar" value="child3"/>
</form>
//我希望根据输入名称 attr 以 JSON 格式输出//(这只是一个示例,需要通用答案和最佳方法)
{
"foo": "parent",
"foo.cat": {
"bar": "child1",
"biz": "child2",
"foo.cat.biz.dog": {
"bar": "child3"
}
}
}
最佳答案
您可以使用 jQuery 并使用像这样的 serializeArray() 方法 var jsonData = $('form').serializeArray();
:
它与您的示例对象不匹配,但它符合您的问题要求。
一旦你有了数组中的字段,你就可以按照你想要的方式操作你的对象。我无法完全遵循如何从表单名称属性到达该对象的逻辑,因此我什至无法尝试映射它。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input name="foo" value="parent"/>
<input name="foo.cat.bar" value="child1"/>
<input name="foo.cat.biz" value="child2"/>
<input name="foo.cat.biz.dog.bar" value="child3"/>
</form>
<input id='btnSerialize' value='Serialize' type='button' onclick='serializeForm()' />
<div id='result'></div>
<script>
function serializeForm()
{
var jsonData = $('form').serializeArray();
var jsonString = JSON.stringify(jsonData);
$('#result').html(jsonString);
}
</script>
如果您更改表单名称,以便可以拥有比纯 JavaScript 更有效的逻辑结构:
/*
{
"foo": {
"bar": "parent",
"biz": "parent",
"cat": {
"bar": "child2achild2a,child2b",
"biz": {
"dog": {
"bar": "child3"
}
}
}
}
}
*/
<form id="myform">
<input name="foo.bar" value="parent" />
<input name="foo.biz" value="parent" />
<input name="foo.cat.bar" value="child2a" />
<input name="foo.cat.bar" value="child2b" />
<input name="foo.cat.biz.dog.bar" value="child3" />
</form>
<script>
function serialize() {
var elements = document.querySelectorAll('#myform input');
var data = {};
for (var i = 0; i < elements.length; i++) {
var el = elements[i];
var val = el.value;
if (!val) val = "";
var fullName = el.getAttribute("name");
if (!fullName) continue;
var fullNameParts = fullName.split('.');
var prefix = '';
var stack = data;
for (var k = 0; k < fullNameParts.length - 1; k++) {
prefix = fullNameParts[k];
if (!stack[prefix]) {
stack[prefix] = {};
}
stack = stack[prefix];
}
prefix = fullNameParts[fullNameParts.length - 1];
if (stack[prefix]) {
var newVal = stack[prefix] + ',' + val;
stack[prefix] += newVal;
} else {
stack[prefix] = val;
}
}
console.log(data);
}
</script>
<input type="button" value="go" onclick="serialize()" />
<p><br /></p>
<p><br /></p>
关于javascript - 如何根据普通 JavaScript 中的输入名称创建表单输入值的嵌套对象 (JSON)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44916365/