本文介绍下，在javascript中实现表单序列化的方法，通过实例加深理解，有需要的朋友参考下吧。
在JavaScript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列。
首先，我们来了解下在表单提交期间，浏览器是怎样将数据发送给服务器的。
对表单字段的名称和值进行URL编码，使用和号（&）分割。
不发送禁用的表单字段。
只发送勾选的复选框和单选按钮。
不发送type为“reset”和“button”的按钮。
多选择框中的每个选中的值单独一个条目。
在单击提交按钮提交表单的情况下，也会发送提交按钮；
否则，不发送提交按钮。也包括type为“image”的<input>元素。
<select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值。
在表单序列化过程中，一般不包含任何按钮字段，因为结果字符串很可能是通过其它方式提交的。
除此之外的其它上述规则都应该遵循。
实现表单序列化的代码：
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
function
serialize(form) {
var
parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for
(i = 0, len = form.elements.length; i < len; i++) {
field = form.elements[i];
switch
(field.type) {
case
"select-one":
case
"select-multiple":
if
(field.name.length) {
for
(j = 0, optLen = field.options.length; j < optLen; j++) {
option = field.options[j];
if
(option.selected) {
optValue = "";
if
(option.hasAttribute) {
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else
{
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "="
+ encodeURIComponent(optValue));
}
}
}
break;
case
undefined:
//字段集
case
"file":
//文件输入
case
"submit":
//提交按钮
case
"reset":
//重置按钮
case
"button":
//自定义按钮
break;
case
"radio":
//单选按钮
case
"checkbox":
//复选框
if
(!field.checked) {
break;
}
/* 执行默认曹旭哦 */
default:
//不包含没有名字的表单字段
if
(field.name.length) {
parts.push(encodeURIComponent(field.name) + "="
+ encodeURIComponent(field.value));
}
}
}
return
parts.join("&");
}var
btn = document.getElementById("serialize-btn");
EventUtil.addHandler(btn, "click", function
(event) {
var
form = document.forms[0];
alert(serialize(form));
}); |
面这个serialize()函数首先定义了一个名为parts的数组，用于保存将要创建的字符串的各个部分。
然后，通过for循环迭代每个表单字段，并将其保存在field变量中。在获得了一个字段的引用之后，使用switch语句检测其type属性。序列化过程最麻烦的就是<select>元素，它可能是单选框也可能是多选框，值可能有一个选中项，而多选框则可能有零或多个选中项。这里的代码适用于这两种选择框，至于可选框的数量是由浏览器控制的。在找到了一个选中项之后，需要确定使用什么值。如果不存在value特性，或者虽然存在该特性，但值为空字符串，都要使用选项的文本代替。为检查这个特性，在DOM兼容的浏览器中需要使用hasAttribute()方法，而在IE中需要使用特性的specified属性。
如果表单中包含<fieldset>元素，则该元素会出现在元素集合中，但没有type属性。因此，如果type属性未定义，则不需要对其进行序列化。同样，对于各种按钮以及文件输入字段也是如此。对于单选按钮和复选框，要检查其checked属性是否被设置为false，如果是则退出switch语句。如果checked属性为ture，则继续执行default语句，即将当前字段的名称和值进行编码，然后添加到parts数组中。函数的最后一步，就是使用join()格式化整个字符串，也就是用和号来分割每一个表单字段。
最后，serialize()函数会以查询字符串的格式输出序列化之后的字符串。