文档章节

Jquery 将表单序列化为Json对象

吟啸_徐行
 吟啸_徐行
发布于 2014/06/17 19:59
字数 482
阅读 251
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
4
0
现场看路演了!

HiBlock
昨天
8
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
7
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
8
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部