jQuey表单序列化

2024-02-17 19:48
文章标签 表单 序列化 jquey

本文主要是介绍jQuey表单序列化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端在处理含有大量数据提交的表单时，除了使用Form直接提交刷新页面之外，经常碰到的需求是收集表单信息成数据对象，Ajax提交。

而在处理复杂的表单时，需要一个一个区手动判断处理字段值，显得非常麻烦。接下来介绍的插件将解决这个问题。

关于serializeJSON

使用jquery.serializeJSON，可以在基于jQuery或者Zepto的页面中，调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。

使用

只需要在jQuery或者Zepto时候引入即可

 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>

 

示例

 

HTML form（支持input、textarea、select等标签）

<form id="my-profile"><!-- simple attribute --><input type="text" name="fullName"              value="Mario Izquierdo" /><!-- nested attributes --><input type="text" name="address[city]"         value="San Francisco" /><input type="text" name="address[state][name]"  value="California" /><input type="text" name="address[state][abbr]"  value="CA" /><!-- array --><input type="text" name="jobbies[]"             value="code" /><input type="text" name="jobbies[]"             value="climbing" /><!-- textareas, checkboxes ... --><textarea              name="projects[0][name]">serializeJSON</textarea><textarea              name="projects[0][language]">javascript</textarea><input type="hidden"   name="projects[0][popular]" value="0" /><input type="checkbox" name="projects[0][popular]" value="1" checked /><textarea              name="projects[1][name]">tinytest.js</textarea><textarea              name="projects[1][language]">javascript</textarea><input type="hidden"   name="projects[1][popular]" value="0" /><input type="checkbox" name="projects[1][popular]" value="1"/><!-- select --><select name="selectOne"><option value="paper">Paper</option><option value="rock" selected>Rock</option><option value="scissors">Scissors</option></select><!-- select multiple options, just name it as an array[] --><select multiple name="selectMultiple[]"><option value="red"  selected>Red</option><option value="blue" selected>Blue</option><option value="yellow">Yellow</option></select>
</form>

 

javascript：

$('#my-profile').serializeJSON();// returns =>
{fullName: "Mario Izquierdo",address: {city: "San Francisco",state: {name: "California",abbr: "CA"}},jobbies: ["code", "climbing"],projects: {'0': { name: "serializeJSON", language: "javascript", popular: "1" },'1': { name: "tinytest.js",   language: "javascript", popular: "0" }},selectOne: "rock",selectMultiple: ["red", "blue"]
}

 

serializeJSON方法返回一个JS对象，并非JSON字符串。可以使用 JSON.stringify 转换成字符串（注意IE8兼容性）。

JavaScript权威指南(第6版)(中文版) http://www.gooln.com/document/452.html

var jsonString = JSON.stringify(obj);

 

指定数据类型

获取到的属性值一般是字符串，可以通过HTML指定类型 : type 进行强制转换。

<form><input type="text" name="notype"           value="default type is :string"/><input type="text" name="string:string"    value=":string type overrides parsing options"/><input type="text" name="excluded:skip"    value="Use :skip to not include this field in the result"/><input type="text" name="number[1]:number"           value="1"/><input type="text" name="number[1.1]:number"         value="1.1"/><input type="text" name="number[other stuff]:number" value="other stuff"/><input type="text" name="boolean[true]:boolean"      value="true"/><input type="text" name="boolean[false]:boolean"     value="false"/><input type="text" name="boolean[0]:boolean"         value="0"/><input type="text" name="null[null]:null"            value="null"/><input type="text" name="null[other stuff]:null"     value="other stuff"/><input type="text" name="auto[string]:auto"          value="text with stuff"/><input type="text" name="auto[0]:auto"               value="0"/><input type="text" name="auto[1]:auto"               value="1"/><input type="text" name="auto[true]:auto"            value="true"/><input type="text" name="auto[false]:auto"           value="false"/><input type="text" name="auto[null]:auto"            value="null"/><input type="text" name="auto[list]:auto"            value="[1, 2, 3]"/><input type="text" name="array[empty]:array"         value="[]"/><input type="text" name="array[list]:array"          value="[1, 2, 3]"/><input type="text" name="object[empty]:object"       value="{}"/><input type="text" name="object[dict]:object"        value='{"my": "stuff"}'/>
</form>

 

$('form').serializeJSON();// returns =>
{"notype": "default type is :string","string": ":string type overrides parsing options",// :skip type removes the field from the output"number": {"1": 1,"1.1": 1.1,"other stuff": NaN, // <-- Other stuff parses as NaN (Not a Number)},"boolean": {"true": true,"false": false,"0": false, // <-- "false", "null", "undefined", "", "0" parse as false},"null": {"null": null, // <-- "false", "null", "undefined", "", "0" parse as null"other stuff": "other stuff"},"auto": { // works as the parseAll option"string": "text with stuff","0": 0,         // <-- parsed as number"1": 1,         // <-- parsed as number"true": true,   // <-- parsed as boolean"false": false, // <-- parsed as boolean"null": null,   // <-- parsed as null"list": "[1, 2, 3]" // <-- array and object types are not auto-parsed},"array": { // <-- works using JSON.parse"empty": [],"not empty": [1,2,3]},"object": { // <-- works using JSON.parse"empty": {},"not empty": {"my": "stuff"}}
}

 

数据类型也可以指定在 data-value-type 属性中，代替 :type 标记。

<form><input type="text" name="number[1]"     data-value-type="number"  value="1"/><input type="text" name="number[1.1]"   data-value-type="number"  value="1.1"/><input type="text" name="boolean[true]" data-value-type="boolean" value="true"/><input type="text" name="null[null]"    data-value-type="null"    value="null"/><input type="text" name="auto[string]"  data-value-type="auto"    value="0"/>
</form>

 

options配置

默认配置

  • Values始终为字符串（除非在input names使用:types ）
  • Keys始终为字符串（默认不自动检测是否需要转换为数组）
  • 未选择的checkboxes会被忽略
  • disabled的elements会被忽略

自定义配置

写法                                 释义
checkboxUncheckedValue: string      针对未勾选的checkboxes，设定值
parseBooleans: true                 自动检测转换”true”、”false”为布尔值true、false
parseNumbers: true                  自动检测转换”1″、”33.33″、”-44″为数字1、33.33、-44
parseNulls: true                    自动检测字符串”null”为null
parseAll: true                      自动检测转换以上类型的字符串
parseWithFunction: function         自定义转换函数 function(value, name){return parsedValue}
customTypes: {}                     自定义:types覆盖默认types，如{type: function(value){…}}
defaultTypes: {defaultTypes}        重新定义所有的:types，如{type: function(value){…}}
useIntKeysAsArrayIndex: true        当keys为整数时，将序列化为数组

 

 包含未勾选的checkboxes

serializeJSON 支持 checkboxUncheckedValue 配置，或者可以在checkboxes添加 data-unchecked-value 属性。

默认方法：

 

<form><input type="checkbox" name="check1" value="true" checked/><input type="checkbox" name="check2" value="true"/><input type="checkbox" name="check3" value="true"/>
</form>
$('form').serializeJSON();// returns =>
{'check1': 'true'} // Note that check2 and check3 are not included because they are not checked

 

上面的写法会忽略未勾选的复选框。如果需要包含，则可以使用以下方法：

1. 配置checkboxUncheckedValue

 

$('form').serializeJSON({checkboxUncheckedValue: "false"});// returns =>
{'check1': 'true', check2: 'false', check3: 'false'}

 

2. 添加data-unchecked-value属性

<form id="checkboxes"><input type="checkbox" name="checked[bool]"  value="true" data-unchecked-value="false" checked/><input type="checkbox" name="checked[bin]"   value="1"    data-unchecked-value="0"     checked/><input type="checkbox" name="checked[cool]"  value="YUP"                               checked/><input type="checkbox" name="unchecked[bool]"  value="true" data-unchecked-value="false" /><input type="checkbox" name="unchecked[bin]"   value="1"    data-unchecked-value="0" /><input type="checkbox" name="unchecked[cool]"  value="YUP" /> <!-- No unchecked value specified -->
</form>

 

$('form#checkboxes').serializeJSON(); // Note no option is used// returns =>
{'checked': {'bool':  'true','bin':   '1','cool':  'YUP'},'unchecked': {'bool': 'false','bin':  '0'// Note that unchecked cool does not appear, because it doesn't use data-unchecked-value}
}

 

自动检测转换类型

默认的类型为字符串 :string ，可以通过配置转换为其它类型

 

$('form').serializeJSON({parseNulls: true, parseNumbers: true});// returns =>
{"bool": {"true": "true", // booleans are still strings, because parseBooleans was not set"false": "false",}"number": {"0": 0, // numbers are parsed because parseNumbers: true"1": 1,"2.2": 2.2,"-2.25": -2.25,}"null": null, // "null" strings are converted to null becase parseNulls: true"string": "text is always string","empty": ""
}

 

在极少数情况下，可以使用自定义转换函数

 

var emptyStringsAndZerosToNulls = function(val, inputName) {if (val === "") return null; // parse empty strings as nullsif (val === 0)  return null; // parse 0 as nullreturn val;
}$('form').serializeJSON({parseWithFunction: emptyStringsAndZerosToNulls, parseNumbers: true});// returns =>
{"bool": {"true": "true","false": "false",}"number": {"0": null, // <-- parsed with custom function"1": 1,"2.2": 2.2,"-2.25": -2.25,}"null": "null","string": "text is always string","empty": null // <-- parsed with custom function
}

 

自定义类型

可以使用 customTypes 配置自定义类型或者覆盖默认类型（$.serializeJSON.defaultOptions.defaultTypes）

 

<form><input type="text" name="scary:alwaysBoo" value="not boo"/><input type="text" name="str:string"      value="str"/><input type="text" name="number:number"   value="5"/>
</form>
$('form').serializeJSON({customTypes: {alwaysBoo: function(str) { // value is always a stringreturn "boo";},string: function(str) { // all strings will now end with " override"return str + " override";}}
});// returns =>
{"scary": "boo",        // <-- parsed with type :alwaysBoo"str": "str override", // <-- parsed with new type :string (instead of the default)"number": 5,           // <-- the default :number still works
}

 

忽略空表单字段

// Select only imputs that have a non-empty value
$('form :input[value!=""]').serializeJSON();// Or filter them from the form
obj = $('form').find('input').not('[value=""]').serializeJSON();// For more complicated filtering, you can use a function
obj = $form.find(':input').filter(function () {return $.trim(this.value).length > 0}).serializeJSON();

使用整数keys作为数组的顺序

使用useIntKeyAsArrayIndex配置

 

<form><input type="text" name="arr[0]" value="foo"/><input type="text" name="arr[1]" value="var"/><input type="text" name="arr[5]" value="inn"/>
</form>

 

按照默认的方法，结果为：

 

$('form').serializeJSON();// returns =>
{'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}

 

使用useIntKeyAsArrayIndex可以将记过转换为数组并制定顺序

$('form').serializeJSON({useIntKeysAsArrayIndex: true});// returns =>
{'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}

 

默认配置Defaults

所有的默认配置均定义在 $.serializeJSON.defaultOptions，可以进行修改。

$.serializeJSON.defaultOptions.parseAll = true; // parse booleans, numbers and nulls by default$('form').serializeJSON(); // No options => then use $.serializeJSON.defaultOptions// returns =>
{"bool": {"true": true,"false": false,}"number": {"0": 0,"1": 1,"2.2": 2.2,"-2.25": -2.25,}"null": null,"string": "text is always string","empty": ""
}

这篇关于jQuey表单序列化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/718806。

相关文章

Java中JSON格式反序列化为Map且保证存取顺序一致的问题

Java中JSON格式反序列化为Map且保证存取顺序一致的问题

《Java中JSON格式反序列化为Map且保证存取顺序一致的问题》：本文主要介绍Java中JSON格式反序列化为Map且保证存取顺序一致的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未... 目录背景问题解决方法总结背景做项目涉及两个微服务之间传数据时，需要提供方将Map类型的数据序列化为co
阅读更多...
RedisTemplate默认序列化方式显示中文乱码的解决

RedisTemplate默认序列化方式显示中文乱码的解决

《RedisTemplate默认序列化方式显示中文乱码的解决》本文主要介绍了SpringDataRedis默认使用JdkSerializationRedisSerializer导致数据乱码,文中通过示... 目录1. 问题原因2. 解决方案3. 配置类示例4. 配置说明5. 使用示例6. 验证存储结果7.
阅读更多...
SpringBoot实现Kafka动态反序列化的完整代码

SpringBoot实现Kafka动态反序列化的完整代码

《SpringBoot实现Kafka动态反序列化的完整代码》在分布式系统中,Kafka作为高吞吐量的消息队列,常常需要处理来自不同主题（Topic）的异构数据,不同的业务场景可能要求对同一消费者组内的... 目录引言一、问题背景1.1 动态反序列化的需求1.2 常见问题二、动态反序列化的核心方案2.1 ht
阅读更多...
SpringBoot项目中Redis存储Session对象序列化处理

SpringBoot项目中Redis存储Session对象序列化处理

《SpringBoot项目中Redis存储Session对象序列化处理》在SpringBoot项目中使用Redis存储Session时,对象的序列化和反序列化是关键步骤,下面我们就来讲讲如何在Spri... 目录一、为什么需要序列化处理二、Spring Boot 集成 Redis 存储 Session2.1
阅读更多...
在.NET平台使用C#为PDF添加各种类型的表单域的方法

在.NET平台使用C#为PDF添加各种类型的表单域的方法

《在.NET平台使用C#为PDF添加各种类型的表单域的方法》在日常办公系统开发中,涉及PDF处理相关的开发时,生成可填写的PDF表单是一种常见需求,与静态PDF不同,带有**表单域的文档支持用户直接在... 目录引言使用 PdfTextBoxField 添加文本输入域使用 PdfComboBoxField
阅读更多...
Java controller接口出入参时间序列化转换操作方法(两种)

Java controller接口出入参时间序列化转换操作方法(两种)

《Javacontroller接口出入参时间序列化转换操作方法(两种)》：本文主要介绍Javacontroller接口出入参时间序列化转换操作方法,本文给大家列举两种简单方法,感兴趣的朋友一起看... 目录方式一、使用注解方式二、统一配置场景：在controller编写的接口，在前后端交互过程中一般都会涉及
阅读更多...
C++如何通过Qt反射机制实现数据类序列化

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类，并对数据类进行存储、打印、调试等操作。由于数据类
阅读更多...
如何配置Spring Boot中的Jackson序列化

如何配置Spring Boot中的Jackson序列化

《如何配置SpringBoot中的Jackson序列化》在开发基于SpringBoot的应用程序时,Jackson是默认的JSON序列化和反序列化工具,本文将详细介绍如何在SpringBoot中配置... 目录配置Spring Boot中的Jackson序列化1. 为什么需要自定义Jackson配置？2.
阅读更多...
Django序列化中SerializerMethodField的使用详解

Django序列化中SerializerMethodField的使用详解

《Django序列化中SerializerMethodField的使用详解》：本文主要介绍Django序列化中SerializerMethodField的使用,具有很好的参考价值,希望对大家有所帮... 目录SerializerMethodField的基本概念使用SerializerMethodField的
阅读更多...
Python实现自动化表单填写功能

Python实现自动化表单填写功能

《Python实现自动化表单填写功能》在Python中,自动化表单填写可以通过多种库和工具实现,本文将详细介绍常用的自动化表单处理工具,并对它们进行横向比较,可根据需求选择合适的工具,感兴趣的小伙伴跟... 目录1. Selenium简介适用场景示例代码优点缺点2. Playwright简介适用场景示例代码
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2