在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("&"); } 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()函数会以查询字符串的格式输出序列化之后的字符串。