14.4 表单序列化

优质
小牛编辑
112浏览
2023-12-01
随着Ajax 的出现,表单序列化已经成为一种常见需求(第21 章将讨论Ajax)。在JavaScript 中,可以利用表单字段的type 属性,连同name 和value 属性一起实现对表单的序列化。在编写代码之前,有必须先搞清楚在表单提交期间,浏览器是怎样将数据发送给服务器的。
  • 对表单字段的名称和值进行URL 编码,使用和号(&)分隔。
  • 不发送禁用的表单字段。
  • 只发送勾选的复选框和单选按钮。
  • 不发送type 为"reset"和"button"的按钮。
  • 多选选择框中的每个选中的值单独一个条目。
  • 在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,不发送提交按钮。也包括type为"image"的<input>元素。
  • <select>元素的值,就是选中的<option>元素的value 特性的值。如果<option>元素没有value 特性,则是<option>元素的文本值。
在表单序列化过程中,一般不包含任何按钮字段,因为结果字符串很可能是通过其他方式提交的。 除此之外的其他上述规则都应该遵循。以下就是实现表单序列化的代码。
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("&");
}
运行一下

上面这个serialize()函数首先定义了一个名为parts 的数组,用于保存将要创建的字符串的各个部分。然后,通过for 循环迭代每个表单字段,并将其保存在field 变量中。在获得了一个字段的引用之后,使用switch 语句检测其type 属性。序列化过程中最麻烦的就是<select>元素,它可能是单选框也可能是多选框。为此,需要遍历控件中的每一个选项,并在相应选项被选中的情况下向数组中添加一个值。对于单选框,只可能有一个选中项,而多选框则可能有零或多个选中项。这里的代码适用于这两种选择框,至于可选项的数量则是由浏览器控制的。在找到一个选中项之后,需要确定使用什么值。如果不存在value 特性,或者虽然存在该特性,但值为空字符串,都要使用选项的文本来代替。

为检查这个特性,在DOM 兼容的浏览器中需要使用hasAttribute()方法,而在IE 中需要使用特性的specified 属性。

如果表单中包含<fieldset>元素,则该元素会出现在元素集合中,但没有type 属性。因此,如果type属性未定义,则不需要对其进行序列化。同样,对于各种按钮以及文件输入字段也是如此(文件输入字段在表单提交过程中包含文件的内容;但是,这个字段是无法模仿的,序列化时一般都要忽略)。对于单选按钮和复选框,要检查其checked 属性是否被设置为false,如果是则退出switch 语句。如果checked 属性为true,则继续执行default 语句,即将当前字段的名称和值进行编码,然后添加到parts 数组中。函数的最后一步,就是使用join()格式化整个字符串,也就是用和号来分隔每一个表单字段。

最后,serialize()函数会以查询字符串的格式输出序列化之后的字符串。当然,要序列化成其他格式,也不是什么困难的事。