jQuery序列化后的表单值转换成Json


Posted in jQuery onJune 16, 2017

小朋友有一个表单,他想以Json的方式获取到表单的内容。小朋友尝试了以下方式。

通过$("#form").serialize()可以获取到序列化的表单值字符串。

例如:

a=1&b=2&c=3&d=4&e=5

通过$("#form").serializeArray()输出以数组形式序列化表单值。

[ 
 {name: 'firstname', value: 'Hello'}, 
 {name: 'lastname', value: 'World'},
 {name: 'alias'}, // 值为空
]

统统不满足小朋友想得到Json的愿望。堆栈溢出后,找到了一个这样的方法

$.fn.serializeObject = function()
{
 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;
};

然后通过 $("#form").serializeObject(); 就可以得到Json内容噜。

以上所述是小编给大家介绍的jQuery序列化后的表单值转换成Json,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
jQuery.form.js的使用详解
Jun 14 #jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 #jQuery
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
You might like
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python 网络编程常用代码段
2016/08/28 Python
python代码实现ID3决策树算法
2017/12/20 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
Delphi软件工程师试题
2013/01/29 面试题
医学生自我鉴定范文
2013/11/08 职场文书
公司晚会主持词
2014/03/22 职场文书
经济纠纷起诉状
2015/05/20 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang