详谈表单格式化插件jquery.serializeJSON
前言
前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。
而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦。接下来介绍的插件将解决这个问题。
关于serializeJSON
使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用.serializeJSON()方法来序列化form表单的数据成JS对象。
使用
只需要在jQuery或者Zepto时候引入即可
示例
HTMLform(支持input、textarea、select等标签)
serializeJSON javascript tinytest.js javascript Paper Rock Scissors Red Blue Yellow
javascript:
$('#my-profile').serializeJSON(); //returns=> { fullName:"MarioIzquierdo", address:{ city:"SanFrancisco", 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
varjsonString=JSON.stringify(obj);
指定数据类型
获取到的属性值一般是字符串,可以通过HTML指定类型:type进行强制转换。
$('form').serializeJSON(); //returns=> { "notype":"defaulttypeis:string", "string":":stringtypeoverridesparsingoptions", //:skiptyperemovesthefieldfromtheoutput "number":{ "1":1, "1.1":1.1, "otherstuff":NaN,//<--OtherstuffparsesasNaN(NotaNumber) }, "boolean":{ "true":true, "false":false, "0":false,//<--"false","null","undefined","","0"parseasfalse }, "null":{ "null":null,//<--"false","null","undefined","","0"parseasnull "otherstuff":"otherstuff" }, "auto":{//worksastheparseAlloption "string":"textwithstuff", "0":0,//<--parsedasnumber "1":1,//<--parsedasnumber "true":true,//<--parsedasboolean "false":false,//<--parsedasboolean "null":null,//<--parsedasnull "list":"[1,2,3]"//<--arrayandobjecttypesarenotauto-parsed }, "array":{//<--worksusingJSON.parse "empty":[], "notempty":[1,2,3] }, "object":{//<--worksusingJSON.parse "empty":{}, "notempty":{"my":"stuff"} } }
数据类型也可以指定在data-value-type属性中,代替:type标记。
options配置
默认配置
Values始终为字符串(除非在inputnames使用:types)
Keys始终为字符串(默认不自动检测是否需要转换为数组)
未选择的checkboxes会被忽略
disabled的elements会被忽略
自定义配置
包含未勾选的checkboxes
serializeJSON支持checkboxUncheckedValue配置,或者可以在checkboxes添加data-unchecked-value属性。
默认方法:
$('form').serializeJSON(); //returns=> {'check1':'true'}//Notethatcheck2andcheck3arenotincludedbecausetheyarenotchecked
上面的写法会忽略未勾选的复选框。如果需要包含,则可以使用以下方法:
1.配置checkboxUncheckedValue
$('form').serializeJSON({checkboxUncheckedValue:"false"}); //returns=> {'check1':'true',check2:'false',check3:'false'}
2.添加data-unchecked-value属性
$('form#checkboxes').serializeJSON();//Notenooptionisused //returns=> { 'checked':{ 'bool':'true', 'bin':'1', 'cool':'YUP' }, 'unchecked':{ 'bool':'false', 'bin':'0' //Notethatuncheckedcooldoesnotappear,becauseitdoesn'tusedata-unchecked-value } }
自动检测转换类型
默认的类型为字符串:string,可以通过配置转换为其它类型
$('form').serializeJSON({parseNulls:true,parseNumbers:true}); //returns=> { "bool":{ "true":"true",//booleansarestillstrings,becauseparseBooleanswasnotset "false":"false", } "number":{ "0":0,//numbersareparsedbecauseparseNumbers:true "1":1, "2.2":2.2, "-2.25":-2.25, } "null":null,//"null"stringsareconvertedtonullbecaseparseNulls:true "string":"textisalwaysstring", "empty":"" }
在极少数情况下,可以使用自定义转换函数
varemptyStringsAndZerosToNulls=function(val,inputName){ if(val==="")returnnull;//parseemptystringsasnulls if(val===0)returnnull;//parse0asnull returnval; } $('form').serializeJSON({parseWithFunction:emptyStringsAndZerosToNulls,parseNumbers:true}); //returns=> { "bool":{ "true":"true", "false":"false", } "number":{ "0":null,//<--parsedwithcustomfunction "1":1, "2.2":2.2, "-2.25":-2.25, } "null":"null", "string":"textisalwaysstring", "empty":null//<--parsedwithcustomfunction }
自定义类型
可以使用customTypes配置自定义类型或者覆盖默认类型($.serializeJSON.defaultOptions.defaultTypes)
$('form').serializeJSON({ customTypes:{ alwaysBoo:function(str){//valueisalwaysastring return"boo"; }, string:function(str){//allstringswillnowendwith"override" returnstr+"override"; } } }); //returns=> { "scary":"boo",//<--parsedwithtype:alwaysBoo "str":"stroverride",//<--parsedwithnewtype:string(insteadofthedefault) "number":5,//<--thedefault:numberstillworks }
忽略空表单字段
//Selectonlyimputsthathaveanon-emptyvalue $('form:input[value!=""]').serializeJSON(); //Orfilterthemfromtheform obj=$('form').find('input').not('[value=""]').serializeJSON(); //Formorecomplicatedfiltering,youcanuseafunction obj=$form.find(':input').filter(function(){ return$.trim(this.value).length>0 }).serializeJSON();
使用整数keys作为数组的顺序
使用useIntKeyAsArrayIndex配置
按照默认的方法,结果为:
$('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;//parsebooleans,numbersandnullsbydefault $('form').serializeJSON();//Nooptions=>thenuse$.serializeJSON.defaultOptions //returns=> { "bool":{ "true":true, "false":false, } "number":{ "0":0, "1":1, "2.2":2.2, "-2.25":-2.25, } "null":null, "string":"textisalwaysstring", "empty":"" }
总结
这个插件支持的配置非常丰富,自定义程度很高,带来很大的便捷性。
以上这篇详谈表单格式化插件jquery.serializeJSON就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。