我正在尝试将HTML表中存在的数据转换为JSON,以便可以在服务器端进行相应的处理。我可以序列化数据,但是结果充其量只能生成不直接链接的独特数据数组。像:这是我正在使用的形式:
<form id="nameGenderForm"> <table id="nameGenderTable"> <tr> <th >Name</th> <th >Gender</th> </tr> <tr> <td><input type="text" name="studentName"></td> <td> <select name="studentGender"> <option value="male">male</option> <option value="female">female</option> </select> </td> </tr> <tr> <td><input type="text" name="studentName"></td> <td> <select name="studentGender"> <option value="male">male</option> <option value="female">female</option> </select> </td> </tr> </table> <input type="submit" /> </form>
序列化数据的脚本是:
$("#nameGenderForm").submit(function(event){ event.preventDefault(); var rawData=$('#nameGenderForm').serializeFormJSON(); var formData=JSON.stringify(rawData); console.log(formData); });
经过数页StackOverFlow之后,我得到了serializeFormJSON():
(function($) { $.fn.serializeFormJSON = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { 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; }; })(jQuery);
通过使用所有这些,我可以得到像这样的JSON:
{"studentName":["kenpachi","orihime"],"studentGender":["male","female"]}
我尝试了多种方法以名称-性别格式获取它们,但是每种方法都产生相同的结果。两个不同的数组。对每个人使用表单也无济于事。有什么办法可以像这样在name- gender数组中获取数据:
{"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"}
请指教。
在这里,您使用了demo,做了一些细微的改动,如下所示:
遍历每个表行,找到输入,文本区域和选择类型元素,对其进行序列化,转换为对象,然后推入数组。
var o = []; $(this).find('tr').each(function() { var $this = $(this); var $elements = $this.find('input, textarea, select') if ($elements.size() > 0) { var serialized = $elements.serialize(); var item = $.toDictionary( serialized ); o.push(item); } });
PS向jquery库添加了一个名为 toDictionary 的新函数,因此请确保也将其包含在代码中。
$ .toDictionary函数
(function($) { $.extend({ toDictionary: function(query) { var parms = {}; var items = query.split("&"); // split for (var i = 0; i < items.length; i++) { var values = items[i].split("="); var key = decodeURIComponent(values.shift()); var value = values.join("=") parms[key] = decodeURIComponent(value); } return (parms); } }) })(jQuery);