前言
前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。
而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦。接下来介绍的插件将解决这个问题。
关于serializeJSON
使用jquery.serializeJSON
,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON()
方法来序列化form表单的数据成JS对象。
使用
下载:
只需要在jQuery或者Zepto时候引入即可
1
2
|
<
script
type
=
"text/javascript"
src
=
"jquery.js"
>
<
/
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.serializejson.js"
>
<
/
script
>
|
示例
HTML form
(支持input
、textarea
、select
等标签)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<
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
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$
(
'#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兼容性)。
1
|
var
jsonString
=
JSON
.
stringify
(
obj
)
;
|
指定数据类型
获取到的属性值一般是字符串,可以通过HTML指定类型 : type 进行强制转换。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<
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
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$
(
'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
标记。
1
2
3
4
5
6
7
|
<
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配置
默认配置
自定义配置
写法 | 释义 |
---|---|
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
属性。
默认方法:
1
2
3
4
5
|
<
form
>
<
input
type
=
"checkbox"
name
=
"check1"
value
=
"true"
checked
/
>
<
input
type
=
"checkbox"
name
=
"check2"
value
=
"true"
/
>
<
input
type
=
"checkbox"
name
=
"check3"
value
=
"true"
/
>
<
/
form
>
|
1
2
3
4
|
$
(
'form'
)
.
serializeJSON
(
)
;
// returns =>
{
'check1'
:
'true'
}
// Note that check2 and check3 are not included because they are not checked
|
上面的写法会忽略未勾选的复选框。如果需要包含,则可以使用以下方法:
1. 配置checkboxUncheckedValue
1
2
3
4
|
$
(
'form'
)
.
serializeJSON
(
{
checkboxUncheckedValue
:
"false"
}
)
;
// returns =>
{
'check1'
:
'true'
,
check2
:
'false'
,
check3
:
'false'
}
|
2. 添加data-unchecked-value
属性
1
2
3
4
5
6
7
8
9
|
<
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
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$
(
'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
,可以通过配置转换为其它类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$
(
'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"
:
""
}
|
在极少数情况下,可以使用自定义转换函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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
)
1
2
3
4
5
|
<
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
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$
(
'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
}
|
忽略空表单字段
1
2
3
4
5
6
7
8
9
10
|
// 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
配置
1
2
3
4
5
|
<
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
>
|
按照默认的方法,结果为:
1
2
3
4
|
$
(
'form'
)
.
serializeJSON
(
)
;
// returns =>
{
'arr'
:
{
'0'
:
'foo'
,
'1'
:
'var'
,
'5'
:
'inn'
}
}
|
使用useIntKeyAsArrayIndex
可以将记过转换为数组并制定顺序
1
2
3
4
|
$
(
'form'
)
.
serializeJSON
(
{
useIntKeysAsArrayIndex
:
true
}
)
;
// returns =>
{
'arr'
:
[
'foo'
,
'var'
,
undefined
,
undefined
,
undefined
,
'inn'
]
}
|
默认配置Defaults
所有的默认配置均定义在 $.serializeJSON.defaultOptions
,可以进行修改。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$
.
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"
:
""
}
|