jquery如何实现获取表单数据以后,以json格式提交表单的功能?我的页面结构如下所示:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
|
<
form
>
<
input
id
=
"a1"
type
=
"input"
value
=
""
name
=
"a1"
>
<
input
id
=
"a2"
type
=
"input"
value
=
""
name
=
"a2"
>
<
input
id
=
"a3"
type
=
"input"
value
=
""
name
=
"a3"
>
<
input
id
=
"a4"
type
=
"input"
value
=
""
name
=
"a4"
>
...
<
select
id
=
"ax"
name
=
"ax"
>
<
option
value
=
"0"
>选项1</
option
>
<
option
value
=
"1"
>选项2</
option
>
</
select
>
<
input
id
=
"submit"
type
=
"submit"
value
=
"提交"
name
=
"submit"
>
</
form
>
|
jQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script src=
"../jquery.js"
type=
"text/javascript"
></script>
<script>
jQuery(document).ready(
function
() {
var
func =
function
(){...}
$(
"#submit"
).click(
function
(){
func(
{
json格式的表单数据
}
);
}
});
</script>
|
如何写jquery里面的以json格式获取表单数据?
方法如下:
将Form的数据转化成Javascript的Json对象
Jquery的serializeArray
方法已经可以实现将Form的数据序列化为一个数组,只要稍微在这个方法的基础上做些修改即可。
方法1:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$
.
fn
.
serializeObject
=
function
(
)
{
var
o
=
{
}
;
var
a
=
this
.
serializeArray
(
)
;
$
.
each
(
a
,
function
(
)
{
if
(
o
[
this
.
name
]
!==
undefined
)
{
if
(
!
o
[
this
.
name
]
.
push
)
{
o
[
this
.
name
]
=
[
o
[
this
.
name
]
]
;
}
o
[
this
.
name
]
.
push
(
this
.
value
||
''
)
;
}
else
{
o
[
this
.
name
]
=
this
.
value
||
''
;
}
}
)
;
}
|
方法2:
1
2
|
var
data
=
{
}
;
$
(
"form"
)
.
serializeArray
(
)
.
map
(
function
(
x
)
{
data
[
x
.
name
]
=
x
.
value
;
}
)
;
|
$(“form”).serializeArray() 不行吗? 还需要map下
serializeArray() 方法序列化表单元素,返回 JSON 数据结构数据。如:
[
{name: ‘firstname’, value: ‘Hello’},
{name: ‘lastname’, value: ‘World’},
{name: ‘alias’}, // 值为空
]