文档章节

Jquery 将表单序列化为Json对象

吟啸_徐行
 吟啸_徐行
发布于 2014/06/17 19:59
字数 482
阅读 248
收藏 22

大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。

 

我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成“:”、“‘”:

  1. /**  

  2.      * 重置form表单  

  3.      * @param formId  form的id   

  4.      */    

  5.     function resetQuery(formId){    

  6.         var fid = "#" + formId;    

  7.         var str = $(fid).serialize();    

  8.         //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04    

  9.         var ob= strToObj(str);    

  10.         alert(ob.startdate);//2012-02-01    

  11.     }    

  12.         

  13.     function strToObj(str){    

  14.         str = str.replace(/&/g,"','");    

  15.         str = str.replace(/=/g,"':'");    

  16.         str = "({'"+str +"'})";    

  17.         obj = eval(str);     

  18.         return obj;    

  19.     }    

 个人感觉这样做有bug。

 

我的方法是,先用serializeArray序列化为数组,再封装为Json对象。

 

 

下面是表单:

 

  1. <form id="myForm" action="#">  

  2.     <input name="name"/>  

  3.     <input name="age"/>  

  4.     <input type="submit"/>  

  5. </form>  

 

 Jquery插件代码如下:

 

  1. (function($){  

  2.         $.fn.serializeJson=function(){  

  3.             var serializeObj={};  

  4.             $(this.serializeArray()).each(function(){  

  5.                 serializeObj[this.name]=this.value;  

  6.             });  

  7.             return serializeObj;  

  8.         };  

  9.     })(jQuery);  

 

 

下面测试一下:$("#myForm").bind("submit",function(e){

  1.     e.preventDefault();  

  2.     console.log($(this).serializeJson());  

  3. });  

 测试结果:

输入a,b提交,得到序列化结果

{age: "b",name: "a"}

 

 

上面的插件,不能适用于有多个值的输入控件,例如复选框、多选的select。下面,我将插件做进一步的修改,让其支持多选。代码如下:

 

  1. (function($){  

  2.         $.fn.serializeJson=function(){  

  3.             var serializeObj={};  

  4.             var array=this.serializeArray();  

  5.             $(array).each(function(){  

  6.                 if(serializeObj[this.name]){  

  7.                     if($.isArray(serializeObj[this.name])){  

  8.                         serializeObj[this.name].push(this.value);  

  9.                     }else{  

  10.                         serializeObj[this.name]=[serializeObj[this.name],this.value];  

  11.                     }  

  12.                 }else{  

  13.                     serializeObj[this.name]=this.value;   

  14.                 }  

  15.             });  

  16.             return serializeObj;  

  17.         };  

  18.     })(jQuery);  

 这里,我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式,请自行修改相应代码。

 

测试如下:

表单:

 

  1. <form id="myForm" action="#">  

  2.     <input name="name"/>  

  3.     <input name="age"/>  

  4.     <select multiple="multiple" name="interest" size="2">  

  5.         <option value ="interest1">interest1</option>  

  6.         <option value ="interest2">interest2</option>  

  7.         <option value="interest3">interest3</option>  

  8.         <option value="interest4">interest4</option>  

  9.     </select>  

  10.     <input type="checkbox" name="vehicle" value="Bike" /> I have a bike  

  11.     <input type="checkbox" name="vehicle" value="Car" /> I have a car  

  12.     <input type="submit"/>  

  13. </form>  

 测试结果:

{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}


本文转载自:http://www.cnblogs.com/hyl8218/archive/2013/06/27/3159178.html

共有 人打赏支持
吟啸_徐行
粉丝 18
博文 109
码字总数 15832
作品 0
深圳
高级程序员
加载中

评论(7)

寂寞的村民
寂寞的村民

参考
将Form数据转化成Json对象
http://blog.jdk5.com/zh/convert-form-data-to-javascript-object-with-jquery/
吟啸_徐行
吟啸_徐行

引用来自“许雷神”的评论

谢谢
许雷神
许雷神
谢谢
丶超_
丶超_
高手 膜拜!!!
吟啸_徐行
吟啸_徐行

引用来自“think2011”的评论

用angularjs,完全不需要这种事情
膜拜一下,这东西还没用过
think2011
think2011
用angularjs,完全不需要这种事情
吟啸_徐行
吟啸_徐行
今天遇到需要处理非常多的页面的不同表单数据才想到统一序列化后ajax上传,不然每个页面都得针对性地敲半天
jQuery ajax - serialize()方法以及常见问题

使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作! jQuery ajax - serialize() 方法定义和用法 serialize() 方法通过序列化表...

freedonn
2014/05/10
0
0
jQuery ajax - serialize() 方法

定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。 序列化的值可在生成 AJAX 请求...

凯文加内特
2015/01/30
0
0
六、jQuery与Ajax的应用

Ajax全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现,揭开了无刷新...

Winnie007
2015/11/21
0
0
jQuery零基础入门——(八)AJAX

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 用JavaScript写AJAX前面已经介绍...

JandenMa
08/06
0
0
表单序列化与反序列化JSON对象(基于jQuery)

最近根据自身项目的特点写了一个表单序列化与反序列化工具,该工具是基于jQuery的,生成JSON对象。虽然jQuery本身已经实现了相似功能和API($().serialize() 和 $().serializeArray()),但使...

Chiroc
2012/11/12
0
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ在CentOS环境安装

1.废话不多说准备一台虚拟机,系统为centos,我这里使用的系统版本如下图所示:

凌晨一点
51分钟前
0
0
线程池相关

在java.util.concurrent包下,提供了一系列与线程池相关的类。 使用线程池的好处 降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗; 提高响应速度。当任务到达时,任务...

edwardGe
53分钟前
0
0
学习大数据这三个关键技术是一定要掌握!

大数据时代全面来临,大数据、人工智能等技术引领科技创新潮流,获得国家政策大力支持,前景广阔。学习大数据技术的人自然是络绎不绝, 学习大数据虽然是一个趋势,但也要注意大数据培训课程...

董黎明
今天
0
0
jetbrains 上传代码到github

设置中找github 获取token 验证是否成功 测试git 生成key,一路回车即可 ssh-keygen -t rsa -C “youremail@example.com” 打开pub复制key,需要再次输入一次密码 验证是否成功,输入yes即可...

阿豪boy
今天
0
0
分布式服务框架(拾遗)

前言 现在的大部分工程都已经是基于分布式架构来处理。所以这里对分布式框架做一个简单的总结 常用的RPC框架 RPC框架原理 RPC(Remote Procedure Call,远程过程调用)一般用来实现部署在不同...

kukudeku
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部