將表單字段轉換為 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.