AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Jquery 将表单序列化为Json对象

2017-11-16 1161
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

大家知道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.             var str=this.serialize();  
  6.             $(array).each(function(){  
  7.                 if(serializeObj[this.name]){  
  8.                     if($.isArray(serializeObj[this.name])){  
  9.                         serializeObj[this.name].push(this.value);  
  10.                     }else{  
  11.                         serializeObj[this.name]=[serializeObj[this.name],this.value];  
  12.                     }  
  13.                 }else{  
  14.                     serializeObj[this.name]=this.value;   
  15.                 }  
  16.             });  
  17.             return serializeObj;  
  18.         };  
  19.     })(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"]}

 

分类:  Jquery

本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/p/4919684.html ，如需转载请自行联系原作者
文章标签：
测试技术
JavaScript
数据格式
JSON
关键词：
JSON序列化
JSON对象
jQuery对象
jQuery表单
序列化对象
吞吞吐吐的
目录
相关文章
凉凉心.
|
4月前
|
JSON 网络协议 安全
【Java】（10）进程与线程的关系、Tread类；讲解基本线程安全、网络编程内容；JSON序列化与反序列化
几乎所有的操作系统都支持进程的概念，进程是处于运行过程中的程序，并且具有一定的独立功能，进程是系统进行资源分配和调度的一个独立单位一般而言，进程包含如下三个特征。独立性动态性并发性。
凉凉心.
254 1
凉凉心.
|
4月前
|
JSON 网络协议 安全
【Java基础】（1）进程与线程的关系、Tread类；讲解基本线程安全、网络编程内容；JSON序列化与反序列化
几乎所有的操作系统都支持进程的概念，进程是处于运行过程中的程序，并且具有一定的独立功能，进程是系统进行资源分配和调度的一个独立单位一般而言，进程包含如下三个特征。独立性动态性并发性。
凉凉心.
268 1
poemyang
|
5月前
|
XML JSON 编解码
从JSON到Protobuf，深入序列化方案的选型与原理
序列化是数据跨边界传输的“翻译官”，将结构化数据转为二进制流。JSON可读性强但冗余大，Protobuf高效紧凑、性能优越，成主流选择。不同场景需权衡标准化与定制优化，选最合适方案。
poemyang
410 3
游客tsrksm3mlhq4y
|
10月前
|
JavaScript 索引
JQuery选择器以及对象
JQ的讲解
游客tsrksm3mlhq4y
184 0
互联网课堂
|
7月前
|
JSON 人工智能 Go
在Golang中序列化JSON字符串的教程
在Golang中，使用`json.Marshal()`可将数据结构序列化为JSON格式。若直接对JSON字符串进行序列化，会因转义字符导致错误。解决方案包括使用`[]byte`或`json.RawMessage()`来避免双引号被转义，从而正确实现JSON的序列化与反序列化。
互联网课堂
370 7
程序员一鸣
|
8月前
|
JSON IDE Java
鸿蒙开发：json转对象插件回来了
首先，我重新编译了插件，进行了上传，大家可以下载最新的安装包进行体验了，还是和以前一样，提供了在线版和IDE插件版，两个选择，最新的版本，除了升级了版本，兼容了最新的DevEco Studio ，还做了一层优化，就是针对嵌套对象和属性的生成，使用方式呢，一年前的文章中有过详细的概述，这里呢也简单介绍一下。
程序员一鸣
276 4
鸿蒙开发：json转对象插件回来了
互联网课堂
|
8月前
|
XML JSON Java
go语言之JSON序列化
本文介绍了Go语言中的JSON序列化与反序列化，其操作与Java类似。需要注意的是，由于Go语言的包管理机制，变量和引入包的首字母需大写，以便其他包引用。示例代码展示了如何将`Student`结构体进行JSON序列化（返回字节数组，需转为字符串）及反序列化。此外，文章还说明了通过tag（如`json`和`xml`）指定序列化变量的重要性，以避免因包间访问限制导致反序列化失败或值为null的问题。
互联网课堂
154 0
程序员爱钓鱼
|
9月前
|
JSON JavaScript 前端开发
Go语言JSON 序列化与反序列化 -《Go语言实战指南》
本文介绍了 Go 语言中使用 `encoding/json` 包实现 JSON 与数据结构之间的转换。内容涵盖序列化（`Marshal`）和反序列化（`Unmarshal`），包括基本示例、结构体字段标签的使用、控制字段行为的标签（如 `omitempty` 和 `-`）、处理 `map` 和切片、嵌套结构体序列化、反序列化未知结构（使用 `map[string]interface{}`）以及 JSON 数组的解析。最后通过表格总结了序列化与反序列化的方法及类型要求，帮助开发者快速掌握 JSON 数据处理技巧。
程序员爱钓鱼
435 0
左诗右码
|
JSON JavaScript 前端开发
Go语言中json序列化的一个小坑，建议多留意一下
在Go语言开发中，JSON因其简洁和广泛的兼容性而常用于数据交换，但其在处理数字类型时存在精度问题。本文探讨了JSON序列化的一些局限性，并介绍了两种替代方案：Go特有的gob二进制协议，以及msgpack，两者都能有效解决类型保持和性能优化的问题。
左诗右码
465 7
左诗右码
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
396 4