文档章节

Jquery 将表单序列化为Json对象

吟啸_徐行
 吟啸_徐行
发布于 2014/06/17 19:59
字数 482
阅读 259
收藏 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
表单序列化与反序列化JSON对象(基于jQuery)

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

Chiroc
2012/11/12
0
2
jQuery零基础入门——(八)AJAX

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

JandenMa
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
20分钟前
1
0
徒手写一个es6代码库

mkdir democd demonpm initnpm install -g babelnpm install -g babel-clinpm install --save-dev babel-preset-es2015-node5 在项目目录创建两个文件夹 functional-playground ......

lilugirl
21分钟前
1
0
linux定位应用问题的一些常用命令,特别针对内存和线程分析的dump命令

1.jps找出进程号,找到对应的进程号后面才好继续操作 2.linux查看进程详细信息 ps -ef | grep 进程ID 3. dump内存信息 Jmap -dump:format=b,file=YYMMddhhmm.dump pid 4.top查看cpu占用信息 ...

noob_chr
21分钟前
1
0
Android TV开发-按键焦点

写在前面 按键焦点过程了解 2.1 dispatchKeyEvent 过程了解 2.2 焦点查找请求过程了解 1.2.1 第一次获取焦点 1.2.3 按键焦点 焦点控制 焦点记忆 应用场景 参考资料 [TOC] 1. 写在前面 工...

冰雪情缘l
21分钟前
1
0
java框架学习日志-3

这章主要是补充一些ioc创建对象的方式,ioc容器在写好<bean></bean>的时候就已经创建对象了。在之前的例子中,一直都是无参的构造方法。下面给出有参的构造方法的对象的创建,没有什么难点重...

白话
24分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部