Javascript将表单序列化为对象

Question

我有带名字的表格“config[display][x]”，“config[display][y]”，”config[端口]“，。。。，或者我可以创建不同的格式。我想将其序列化为JS对象，如

{配置：显示：{x:'值'，y:'值'}，端口：“value”}

有人知道现有的解决方案吗？

p.s.我可以用jQuery的.serializeArray（）序列化表单，但我会有一个带有简单{name:name，value:value}散列的数组。但如何创建对象呢？

Answer 1

查看我的库https://github.com/serbanghita/formTo对象-还与现有解决方案进行了比较。

var myFormObj=表单对象（'myFormId'）；/* console.log（myFormObj）；{saveSettings:'保存'，name:'塞尔维亚人'，种族：“兽人”，设置：{input:'键盘'，视频：{分辨率：“1024x768”，vsync:“on”}}}*/

Answer 2

我用过本·阿尔曼斯.serializeObject（）它起了作用。

http://benalman.com/projects/jquery-misc-plugins/#序列化对象

代码小而容易：

$.fn.serializeObject=函数（）{变量obj={}；$.each（this.serializeArray（），函数（i，o）{var n=o.name，v=o值；obj[n]=obj[n]===未定义？v（v）：$.isArray（对象[n]）？对象[n].concat（v）：[对象[n]，v]；});返回对象；};

Answer 3

这就是我如何使用嵌套表单名称来实现这一点，根据我要传输的内容，嵌套表单可以有多个层。我只需要在边缘情况下使用这个，但我想我会在这里分享这个。

我有一个问题，表单名称是作为data[SomeName[hello]][world]=“foobar”这将导致php上出现糟糕的数据结构（例如）

$数据=[“数据”=>[“SomeName[你好”=>[“world”=>“foobar”],],];

在提交我只使用的序列化数据之前不检查数据客户端https://stackoverflow.com/a/48218209/1356107对于，当表单数据被包装到另一个对象中时，我遇到了这些错误。

通过检查代码以跳过下面的代码片段，我解决了问题，并能够发送完整的有效数据结构。

getFormData=函数（$form）{    	var paramObj={}；/***信用到期时的信用。复制自https://stackoverflow.com/a/48218209/1356107作者：jhildenbiddle*/var mergeDeep=函数（…对象）{var isObject=obj=>obj&&typeof obj==='对象'；return objects.reduce（（prev，obj）=>{Object.keys（obj）.forEach（key=>{var pVal=上一个[key]；var oVal=对象[键]；if（Array.isArray（pVal）&&数组.isArray（oVal））{prev[key]=pVal.concat（…oVal）；}else if（isObject（pVal）和isObject{prev[key]=合并深度（pVal，oVal）；}其他{prev[key]=oVal；}});返回上一个；}, {});}var phpFormKeyToObject=函数（键，值）{var lookup=key.indexOf（'['）；if（查找！=-1）{var arrayName=key.substring（0，查找）；var newObj={}；newObj[arrayName]={}；var res=key.matchAll（/\[（.*？）\]/g）；var previous=newObj[arrayName]；var lastkey=数组名称；var lastobj=新对象；for（res的var匹配）{/** *数组提前退出。零长度键，是数组、追加和退出。*/if（匹配[1]。长度==0）{if（Array.isArray（lastobj[lastkey]））{lastbj[lastkey].push（值）；return newObj；}其他{lastobj[lastkey]=[value]；return newObj；}}其他{上一个[匹配[1]]={}；lastobj=上一个；previous=上一个[匹配[1]]；lastkey=匹配[1]；}}lastobj[lastkey]=值；return newObj；}返回false；}/** *信贷到期时的信贷，略有修改的版本https://stackoverflow.com/a/2403206/1356107通过Pointy*/  $.each（$form.serializeArray（），函数（_，kv）{if（kv.name.indexOf（'['）！=-1）{var obj=phpFormKeyToObject（kv.name，kv.value）；paramObj=合并深度（paramOb，obj）；}其他{if（paramObj.hasOwnProperty（kv.name））{paramObj[kv.name]=$.makeArray（paramObj[kv.name]）；paramObj[kv.name].push（kv.value）；}其他{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>检查1</label><input type=“checkbox”value=“1”name=“SomeName[checkboxvalues][]”><BR/><label>选中它2</label><input type=“checkbox”value=“2”name=“SomeName[checkboxvalues][]”><BR/><label>检查3</label><input type=“checkbox”value=“3”name=“SomeName[checkboxvalues][]”><BR/><label>测试</label><input type=“text”value=“test”name=“SomeName[test]”><BR/><label>额外1的金额<select name=“SomeName[extra_items][320]”><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option></select><br/><label>额外2的金额<select name=“SomeName[extra_items][321]”><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option></选择><BR/><input type=“hidden”name=“somehiddenvalue”value=“这是隐藏的”><input type=“button”onclick=“console.log（getFormData（$（'#testform'）））”value=“test me”>

Answer 4

要将JavaScript对象序列化为字符串，请使用：

var str=JSON.stringfy（obj）；

要将字符串反序列化为JavaScript对象，请使用：

var obj=JSON.parse（str）；

如果您使用的是不支持这些方法的旧浏览器，则可以使用JSON2格式道格拉斯·克罗克福德图书馆。

Answer 5

我相信这就是你所寻求的：

函数assignByPath（对象、路径、值）{if（路径长度==1）{obj[路径[0]]=值；返回对象；}else if（obj[path[0]]===未定义）{obj[path[0]]=｛｝；} return assignByPath（obj[path.shift（）]，path，value）；}$.fn.serializeObject=函数（）{变量obj={}；$.each（this.serializeArray（），函数（i，o）{var n=o.name，v=o值；路径=n.replace（'['，'.'）.replace（''，'.''）.replay（''，''）.split（''）；assignByPath（obj，path，v）；});返回对象；};