表单格式化插件jquery.serializeJSON
前言
前端在处理含有大量数据提交的表单时,除了使用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 nulls if (val === 0) return null; // parse 0 as null return 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 string return "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": "" }
总结
这个插件支持的配置非常丰富,自定义程度很高,带来很大的便捷性。
表单格式化插件jquery.serializeJSON的更多相关文章
- 获取表单内的所有元素的值 表单格式化插件jquery.serializeJSON
简单描述:一个form表单里有十几个input或者select,要获取到他们的值,我的做法一直都是$("#id").val();这样做本来没什么说的,但是如果有很多呢,就很麻烦,看 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- 表单验证插件jquery.validate的使用方法演示
jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...
- jQuery插件 -- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- jquery表单验证插件 jquery.form.js ------转载
Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...
- jquery表单验证插件 jquery.form.js-转
来自:http://www.cnblogs.com/luluping/archive/2009/04/15/1436177.html Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满 ...
随机推荐
- unity 本地帮助文档 慢
unity ,打开本地帮助文档时,有时会加载很慢,主要原因是网页里嵌入了访问google的代码.解决办法:打开本地hosts文件,里面加入"127.0.0.1 fonts.googleapi ...
- getRequestURI()与getRequestURL()的区别
引于: http://hi.baidu.com/cloudxpc request.getRequestURI() 返回值类似:/xuejava/requestdemo.jsprequest.getRe ...
- redis 主从配置实例、注意事项、及备份方式
这两天在配置线上使用的redis服务.总得看起来,redis服务的配置文件还是非常简洁.清楚,配置起来非常顺畅,赞一下作者. 下面是我使用的配置,使用主从模式,在master上关掉所有持久化,在sla ...
- 使用bootstrap的插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- JS 基本数据类型和引用数据类型
本文章已收录于: .embody { padding: 10px 10px 10px; margin: 0 -20px; border-bottom: solid 1px #ededed } .e ...
- nginx+gridfs+mongodb 配置访问png图片显示无法加载问题
上传文件后,浏览器中请求:http://<nginx server ip>:<port>/gfs/<my file> 浏览器出现"无法打开页面" ...
- 基于本地文件系统的LocalDB
零.前言 之前写一些小工具的时候,需要用到数据存储方面的技术,但是用数据库又觉得太大了,本地文件存储txt文件存储又不是很规范,于是乎想到了去编写一个简单的基于本地文件系统的数据存储库,暂且叫它loc ...
- chrome的断点调试
DOM节点变化时触发断点具体触发条件可分3种情况:子节点有变化.节点的属性发生变化或这个节点被删除.可以快速找到对应的事件处理函数. 条件断点 写一个表达式,表达式为 true 时才触发该断点. 在D ...
- Django集成celery实战小项目
上一篇已经介绍了celery的基本知识,本篇以一个小项目为例,详细说明django框架如何集成celery进行开发. 本系列文章的开发环境: window 7 + python2.7 + pychar ...
- 开涛spring3(6.9) - AOP 之 6.9 代理机制
Spring AOP通过代理模式实现,目前支持两种代理:JDK动态代理.CGLIB代理来创建AOP代理,Spring建议优先使用JDK动态代理. JDK动态代理:使用java.lang.reflect ...