使用jQuery将复杂表单序列化为JSON对象
我一直在寻找这个时间，但没有找到答案。 火焰之前请仔细阅读整个问题！ 🙂
我有一个类似这样的表格：
并且需要能够将其序列化为：
{ name: 'name value', phone: [ { type: 'cell', number: '000' }, { type: 'home', number: '111' } ] }
我在SO上尝试了大多数答案，包括jquery-json库，大多数都返回这样的东西：
{ 'name': 'name value', 'phone[0][type]': 'cell', 'phone[0][number]': '000', 'phone[1][type]': 'home', 'phone[1][number]': '111', }
这是我无法使用的东西！ ：P
提前谢谢大家。
试试这个我为你写的代码……对我来说很好，只需使用你的数据结果。 你可以使用它并制作一个简单的jQuery插件……
该示例需要JSON.stringify才能完全运行。
var d = { 'name': 'name value', 'phone[0][type]': 'cell', 'phone[0][number]': '000', 'phone[1][type]': 'home', 'phone[1][number]': '111', }; $(document).ready(function(){ arrangeJson(d); alert(JSON.stringify(d)); }); function arrangeJson(data){ var initMatch = /^([a-z0-9]+?)\[/i; var first = /^\[[a-z0-9]+?\]/i; var isNumber = /^[0-9]$/; var bracers = /[\[\]]/g; var splitter = /\]\[|\[|\]/g; for(var key in data) { if(initMatch.test(key)){ data[key.replace(initMatch,'[$1][')] = data[key]; } else{ data[key.replace(/^(.+)$/,'[$1]')] = data[key]; } delete data[key]; } for (var key in data) { processExpression(data, key, data[key]); delete data[key]; } function processExpression(dataNode, key, value){ var e = key.split(splitter); if(e){ var e2 =[]; for (var i = 0; i < e.length; i++) { if(e[i]!==''){e2.push(e[i]);} } e = e2; if(e.length > 1){ var x = e[0]; var target = dataNode[x]; if(!target){ if(isNumber.test(e[1])){ dataNode[x] = []; } else{ dataNode[x] ={} } } processExpression(dataNode[x], key.replace(first,''), value); } else if(e.length == 1){ dataNode[e[0]] = value; } else{ alert('This should not happen...'); } } } }
这对我很有用。 这不需要有form2js库。
$.fn.serializeObject = function serializeObject() { 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.stringify($(this).serializeObject());//'this' points to the form
如果您有任何疑问，请随时添加评论。
有了这个结构，我认为任何JSON库都不能完成所有的工作。 所以，我认为编写自己的转换循环更容易。
以下是序列化的代码： http ： //jsfiddle.net/7MAUv/1/
逻辑非常简单，秘诀就是像动态命令一样运行字符串。 我试图让它变得越来越容易，几乎所有的行都被评论过了。
BTW，随意提出问题。
它不完全是你要求的，但是如果你使用jQuery库并且需要复杂的表单序列化以便在ajax中发送它，你可以使用这样的……
ajaxRunning = $.ajax( "?"+$('#yourForm').serialize(), { data: { anotherData: 'worksFine', etc: 'still works' }, success: function(result) { doSth(); }, dataType: "json" });
你也可以使用$ .post和$ .get
的nJoy！
另一个解决这个问题的库是Mario Izquierdo的jquery.serializeJSON 。 它工作并扩展jQuery。