序列化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对象的更多相关文章

  1. jQuery将form表单的数据封装成json对象

    /** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...

  2. form表单在前台转json对象

    会发生序列化乱码问题,待解决. //根据表单id将其内空间,名称,值转为json var fireTraceEquipment =queryParamByFormId('form1'); functi ...

  3. jquery 获取表单的内容以JSON对象形式返回

    添加一个serializeJson方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  4. Jquery Form表单元素对象化

    function serializeObject(form){ var o = {}; $.each(form.serializeArray(),function(index){ o[this['na ...

  5. 使用jquery将表单自动封装成json对象 /json对象元素的添加删除和转换

    $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function ( ...

  6. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  7. 023-将表单序列化为json对象

    使用jQuery将表单序列化为json对象,其中serializeJson方法的名字任意,serializeArray()这个jQuery提供的方法.this指的就是谁调用了这个方法. $.fn.se ...

  8. form表单元素的值序列化成对象

    /** * 将form表单元素的值序列化成对象 * param: form jquery form对象 */ var serializeObject = function(form) { var o ...

  9. 将form表单元素的值序列化成对象

    /**jQuery * 将form表单元素的值序列化成对象 * @returns object */ var serializeObject = function(form) { var o = {} ...

随机推荐

  1. C++的Vector用法

    转自:http://www.cnblogs.com/wang7/archive/2012/04/27/2474138.html 在c++中,vector是一个十分有用的容器,下面对这个容器做一下总结. ...

  2. Memento 备忘录 快照模式 MD

    备忘录模式 简介 在不破坏封装的前提下,捕获一个对象的[内部状态],并在该对象之外保存这个状态,这样以后就可以将该对象恢复到原先保存的状态. 角色: 发起人Originator:要被备份的成员,它提供 ...

  3. 25个精致的IPHONE 6和APPLE WATCH原型下载！

    自iPhone 6 和Apple Watch那场的发布会后,很多设计师开始创作相关的原型素材,值得感谢的是,这些作品有好多都无私分享到了网上,不仅可个人使用,也可商用.今天我们收集了从这组免费的素材中 ...

  4. linux loop device介绍

    在Linux中,有一种特殊的块设备叫loop device,这种loop device设备是通过影射操作系统上的正常的文件而形成的虚拟块设备.因为这种设备的存在,就为我们提供了一种创建一个存在于其他文 ...

  5. （转）[原创]在ios android设备上使用 Protobuf (使用源码方式)

    自:http://game.ceeger.com/forum/read.php?tid=13479 如果你的工程只能以.Net 2.0而不能以.Net 2.0 subset运行,请看另外一个方法. 地 ...

  6. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  7. LuaCURL

    LuaCURL:http://luacurl.luaforge.net/ curl大家应该都知道吧,在linux下被广泛使用,也有windows版本,网络上还有其win32版本的源代码.它是一个命令行 ...

  8. 【读书笔记】Flickr 网站用户标签的质量控制对策

    1.一些背景 标签技术重要意义 标签技术如今已经被广泛应用于包括网络书签.博客.播客.视频分享等在内的多种 Web2. 0 服务 Flickr简介 Flickr 是一集图片存放 交友 组群 邮件等功能 ...

  9. 调整UIPickerView高度

    Advantages: Makes setFrame of UIPickerView behave like it should No transform code within your UIVie ...

  10. Java从零开始学三十一(DATE和Calendar类)

    一.Date类 Date类是一个相对较为简单的操作类,在使用中直接使用java.util.Date类的构造方法并进行输出就可以得到一个完整的日期 二.Calendar类 Calendar类可以将取得的 ...