jQuery实现form表单元素序列化为json对象的方法


Posted in Javascript onDecember 09, 2015

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法。分享给大家供大家参考,具体如下:

这段代码序列化form表单元素为json对象:

<!Doctype html>
 <html xmlns=http://www.w3.org/1999/xhtml>
 <head>
 <title>jQuery扩展——form序列化到json对象</title>
 <meta http-equiv=Content-Type content="text/html;charset=utf-8">
 <script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<p id="results"><b>Results:</b> </p>
<form>
 <select name="aModel.single">
 <option>Single</option>
 <option selected>Single2</option>
 </select>
 <br/><br/>
 <select name="aModel.multiple" multiple="multiple">
 <option selected="selected">Multiple</option>
 <option>Multiple2</option>
 <option selected="selected">Multiple3</option>
 </select>
 <br/><br/>
 <input type="checkbox" name="aModel.check" value="check1"/> check1
 <input type="checkbox" name="aModel.check" value="check2" checked="checked"/> check2
 <br/><br/>
 <input type="radio" name="aModel.radio" value="radio1" checked="checked"/> radio1
 <input type="radio" name="aModel.radio" value="radio2"/> radio2
</form>
<script type="text/javascript">
 var fields = $("select, :radio").serializeArray();
 var o={};
 jQuery.each(fields, function(i, fields){
  if(o[this.name]){
   /*
   表单中可能有多个相同标签,比如有多个label,
   那么你在json对象o中插入第一个label后,还要继续插入,
   那么这时候o[label]在o中就已经存在,所以你要把o[label]做嵌套数组处理
   */
   //如果o[label]不是嵌套在数组中
   if(!o[this.name].push){
    o[this.name]=[o[this.name]];  // 将o[label]初始为嵌套数组,如o={a,[a,b,c]}
   }
   o[this.name].push(this.value || ''); // 将值插入o[label]
  }else{
   o[this.name]=this.value || '';  // 第一次在o中插入o[label]
  }
 });
 $("#results").append(JSON.stringify(o));
 console.log(o); //用FireBug输出
</script>
</body>
</html>

结果如下图所示:

jQuery实现form表单元素序列化为json对象的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 #Javascript
深入浅析react native es6语法
Dec 09 #Javascript
JavaScript程序设计之JS调试
Dec 09 #Javascript
js实现的星星评分功能函数
Dec 09 #Javascript
JavaScript中的this到底是什么(一)
Dec 09 #Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 #Javascript
完美实现bootstrap分页查询
Dec 09 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
又一个php 分页类实现代码
2009/12/03 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
简单了解python PEP的一些知识
2019/07/13 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python能自学吗
2020/06/18 Python
Python读写压缩文件的方法
2020/07/30 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
便利店的创业计划书
2014/01/15 职场文书
司机检讨书
2014/02/13 职场文书
运动会广播稿20字
2014/02/18 职场文书
工程材料采购方案
2014/05/18 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
奥林匹克的口号
2014/06/13 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电