详谈表单格式化插件jquery.serializeJSON

2024-02-18 10:15:03 290

前言

前端在处理含有大量数据提交的表单时，除了使用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就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

详谈表单格式化插件jquery.serializeJSON

热门推荐

随机推荐