文档章节

Jquery 将表单序列化为Json对象

吟啸_徐行
 吟啸_徐行
发布于 2014/06/17 19:59
字数 482
阅读 241
收藏 22
点赞 0
评论 7

大家知道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
博文 108
码字总数 15604
作品 0
深圳
程序员
加载中

评论(7)

寂寞的村民
寂寞的村民

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

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

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

引用来自“think2011”的评论

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

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 昨天 ⋅ 0

jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge ⋅ 05/19 ⋅ 0

Javascript对象的深浅拷贝

开门见山,有人叫对象的复制为深复制浅复制,也有人叫深拷贝浅拷贝。 其实都是copy。 深拷贝(递归复制,复制所有层级,独立副本,一个完全和原来对象属性无关的副本) 返回对象:一个。 传入对...

趁你还年轻233 ⋅ 04/11 ⋅ 0

jQuery-File-Upload 使用文档(翻译)

最近要用到多图上传,准备使用这个插件,但是没搜到相关的文档,只有官方的文档,主要是以有道翻译和个人理解为主 可能会有一些问题,但是比看原文是方便一些. 使用文档 插件的基本信息 插件demo ...

employeeee ⋅ 05/14 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

JavaWeb15-HTML篇笔记(三)

1.1 案例三:使用JQuery完成仿百度的信息提示:1.1.1 需求: 在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的). 1.1.2 分析:1.1.2.1 步骤分析: ...

我是小谷粒 ⋅ 06/01 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

api接口中ajax数据请求与数据返回的小坑

AJAX 可以使网页实现异步更新,XMLHttpRequest 是 AJAX 的基础,大部分浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject),XMLHttpRequest对象基于HTTP协议用于在后台与服务...

wx599c47c7bdcad ⋅ 06/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 昨天 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 昨天 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 昨天 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 昨天 ⋅ 0

聊聊spring cloud gateway的RedisRateLimiter

序 本文主要研究下spring cloud gateway的RedisRateLimiter GatewayRedisAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/gateway/con......

go4it ⋅ 昨天 ⋅ 0

169. Majority Element - LeetCode

Question 169. Majority Element Solution 思路:构造一个map存储每个数字出现的次数,然后遍历map返回出现次数大于数组一半的数字. 还有一种思路是:对这个数组排序,次数超过n/2的元素必然在中...

yysue ⋅ 昨天 ⋅ 0

NFS

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC...

派派菠菜 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部