我有带有名称的表格
'config[display][x]', 'config[display][y]', 'config[port]',...
,或者我可以创建不同的格式。
我想将它序列化为 JS 对象,例如
{config:
display : {x : 'value', y : 'value'},
port : 'value'
}
有人知道现有的解决方案吗?
附注我可以使用 jQuery 的 .serializeArray() 序列化表单,但我将拥有带有简单的 {name : name, value : value} 哈希值的数组。但如何创建对象呢?
查看我的库https://github.com/serbanghita/formToObject - 还有与现有解决方案的比较。
var myFormObj = formToObject('myFormId');
/*
console.log(myFormObj);
{
saveSettings: 'Save',
name: 'Serban',
race: 'orc',
settings: {
input: 'keyboard',
video: {
resolution: '1024x768',
vsync: 'on'
}
}
}
*/
我使用了 Ben Almans
.serializeObject()
,它很有效。
http://benalman.com/projects/jquery-misc-plugins/#serializeobject
代码小而简单:
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name,
v = o.value;
obj[n] = obj[n] === undefined ? v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return obj;
};
要将 JavaScript 对象序列化为字符串,请使用:
var str = JSON.stringify(obj);
要将字符串反序列化为 JavaScript 对象,请使用:
var obj = JSON.parse(str);
如果您使用的旧版浏览器不支持这些方法,您可以使用 Douglas Crockford 的 JSON2 库。
我相信这就是你所寻求的:
function assignByPath(obj,path,value){
if (path.length == 1) {
obj[path[0]] = value;
return obj;
} else if (obj[path[0]] === undefined) {
obj[path[0]] = {};
}
return assignByPath(obj[path.shift()],path,value);
}
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name,
v = o.value;
path = n.replace('[','.').replace('][','.').replace(']','').split('.');
assignByPath(obj,path,v);
});
return obj;
};
这就是我使用嵌套表单名称执行此操作的方法,根据我必须传输的内容,嵌套表单名称可以有多个层。我只在边缘情况下需要这个,但我想我应该在这里分享这个。
我遇到了表单名称提交为
data[SomeName[hello]][world] = "foobar"
的问题,这会导致 php 上出现令人讨厌的数据结构(例如)
$data = [
"data" => [
"SomeName[hello" => [
"world" => "foobar"
],
],
];
在提交我只使用的序列化数据之前没有检查数据客户端https://stackoverflow.com/a/48218209/1356107,当表单数据被包装到另一个对象中时,我收到了这些错误。
通过检查下面代码片段中的代码以跳过,我解决了问题并能够发送完整的有效数据结构。
getFormData = function($form)
{
var paramObj = {};
/**
* Credit where credit is due. Copied from https://stackoverflow.com/a/48218209/1356107 by jhildenbiddle
*/
var mergeDeep = function(...objects)
{
var isObject = obj => obj && typeof obj === 'object';
return objects.reduce((prev, obj) => {
Object.keys(obj).forEach(key => {
var pVal = prev[key];
var oVal = obj[key];
if (Array.isArray(pVal) && Array.isArray(oVal)) {
prev[key] = pVal.concat(...oVal);
}
else if (isObject(pVal) && isObject(oVal)) {
prev[key] = mergeDeep(pVal, oVal);
}
else {
prev[key] = oVal;
}
});
return prev;
}, {});
}
var phpFormKeyToObject = function(key, value)
{
var lookup = key.indexOf('[');
if(lookup != -1) {
var arrayName = key.substring(0, lookup);
var newObj = {};
newObj[arrayName] = {};
var res = key.matchAll(/\[(.*?)\]/g);
var previous = newObj[arrayName];
var lastkey = arrayName;
var lastobj = newObj;
for(var match of res) {
/**
* Arrays exit early. zero length key, is array, append and exit.
*/
if(match[1].length == 0) {
if(Array.isArray(lastobj[lastkey])) {
lastobj[lastkey].push(value);
return newObj;
}
else {
lastobj[lastkey] = [value];
return newObj;
}
}
else {
previous[match[1]] = {};
lastobj = previous;
previous = previous[match[1]];
lastkey = match[1];
}
}
lastobj[lastkey] = value;
return newObj;
}
return false;
}
/**
* Credit where credit is due, slightly modified version of https://stackoverflow.com/a/2403206/1356107 by Pointy
*/
$.each($form.serializeArray(), function(_, kv) {
if(kv.name.indexOf('[') != -1) {
var obj = phpFormKeyToObject(kv.name, kv.value);
paramObj = mergeDeep(paramObj, obj);
}
else {
if (paramObj.hasOwnProperty(kv.name)) {
paramObj[kv.name] = $.makeArray(paramObj[kv.name]);
paramObj[kv.name].push(kv.value);
}
else {
paramObj[kv.name] = kv.value;
}
}
});
return paramObj;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testform">
<label>check it 1</label><input type="checkbox" value="1" name="SomeName[checkboxvalues][]"><BR/>
<label>check it 2</label><input type="checkbox" value="2" name="SomeName[checkboxvalues][]"><BR/>
<label>check it 3</label><input type="checkbox" value="3" name="SomeName[checkboxvalues][]"><BR/>
<label>test</label><input type="text" value="test" name="SomeName[test]"><BR/>
<label>how much of extra 1</label>
<select name="SomeName[extra_items][320]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br/>
<label>how much of extra 2</label>
<select name="SomeName[extra_items][321]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><BR/>
<input type="hidden" name="somehiddenvalue" value="this is hidden">
<input type="button" onclick="console.log(getFormData($('#testform')))" value="test me">