大佬教程收集整理的这篇文章主要介绍了jquery – 将表数据转换为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); });
serializeFormJSON()是我在浏览几页StackOverFlow后得到的:
(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"}
请指教.
循环遍历每个表行,找到输入,textarea和选择类型元素,序列化它们,转换为对象然后推送到数组.
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); } });
附:在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);
以上是大佬教程为你收集整理的jquery – 将表数据转换为JSON全部内容,希望文章能够帮你解决jquery – 将表数据转换为JSON所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。