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 相关文章推荐
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
上传多个文件的PHP脚本
2006/11/26 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
PHP经典面试题
2016/09/03 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
土地租赁意向书
2014/07/30 职场文书
党员承诺书格式范文
2015/04/28 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python