将表单字段转换为 JSON 对象
[英]Convert form fields into JSON object
问题描述
我有以下表格：
<form id="myForm" method="POST">
<input type="text" name="matrix[]" value="1"/><br/>
<input type="text" name="matrix[]" value="2"/><br/>
<input type="text" name="matrix[]" value="3"/><br/>
<input type="text" name="multi_matrix[colors][]" value="red"/><br/>
<input type="text" name="multi_matrix[colors][]" value="blue"/><br/>
<input type="text" name="multi_matrix[weight][]" value="75"/><br/>
<input type="text" name="multi_matrix[weight][]" value="83"/><br/>
<input type="submit" value="Send">
</form>
现在我想使用 JavaScript/jQuery 将这些值转换为 JSON 字符串。 当我使用 JSON.stringify($("#myForm").serializeArray()) 代码时，它返回以下内容：
[{"name":"matrix[]","value":"1"},{"name":"matrix[]","value":"2"},{"name":"matrix[]","value":"3"},{"name":"multi_matrix[colors][]","value":"red"},{"name":"multi_matrix[colors][]","value":"blue"},{"name":"multi_matrix[weight][]","value":"75"},{"name":"multi_matrix[weight][]","value":"83"}]
如您所见，所有字段都有一个单独的条目，但我想将它们连接在一起以获得以下内容：
{"matrix":[1,2,3],"multi_matrix":{"colors":["red","blue"],"weight":[75,83]}}
有没有内置函数可以做到这一点？ 还是我必须遍历所有字段并自己手动创建 JSON？
2 个解决方案
解决方案1
1 2015-06-14 19:52:49
我的变种：
arr = $("#myForm").serializeArray(); var res={}; var m,o; arr.forEach(function(item){ m = item.name.match(/[^\\]\\[]+/g); o = res; m.forEach(function(v,i,a){ if(o[v] === undefined) { if(i+1 !== a.length) { o[v] = {}; o = o[v]; return; } o[v] = [item.value]; } else { if(i+1 !== a.length) { o = o[v]; return; } o[v].push(item.value); } }); }) console.log(res) $('<pre>'+JSON.stringify(res)+'</pre>').appendTo('#result')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form id="myForm" method="POST"> <input type="text" name="matrix[]" value="1"/><br/> <input type="text" name="matrix[]" value="2"/><br/> <input type="text" name="matrix[]" value="3"/><br/> <input type="text" name="multi_matrix[colors][]" value="red"/><br/> <input type="text" name="multi_matrix[colors][]" value="blue"/><br/> <input type="text" name="multi_matrix[weight][]" value="75"/><br/> <input type="text" name="multi_matrix[weight][]" value="83"/><br/> <input type="text" name="multi_matrix[weight_real][]" value="83.32"/><br/> <input type="text" name="multi_matrix[weight_real][]" value="83.65"/><br/> <input type="text" name="multi_matrix[price][unreal][]" value="383.32"/><br/> <input type="text" name="multi_matrix[price][unreal][]" value="183.65"/><br/> <input type="submit" value="Send"> </form> <div id="result"></div>
{
"matrix": ["1", "2", "3"],
"multi_matrix": {
"colors": ["red", "blue"],
"weight": ["75", "83"],
"weight_real": ["83.32", "83.65"],
"price": {
"unreal": ["383.32", "183.65"]
}
}
}
解决方案2
1 已采纳 2015-06-15 13:24:44
您可以基于serializeArray()扩展 jQuery 并创建一个 UDF serializeObject 就像在这个答案中所做的那样：
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
如何将表单字段转换为Json Object？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.