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 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
军训自我鉴定
2014/01/22 职场文书
安全资金保障制度
2014/01/23 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript