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 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
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
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
深入理解Python对Json的解析
2017/02/14 Python
Python工厂函数用法实例分析
2018/05/14 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python实现飞机大战项目
2020/03/11 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
英语道歉信范文
2014/01/09 职场文书
军训 自我鉴定
2014/02/03 职场文书
企业总经理岗位职责
2014/02/13 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
怎样写离婚协议书
2014/09/10 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL