原生JS实现表单序列化serialize()

使用原生的js模拟了表单序列化，代码中对表单处理尽量地进行文字说明 其中对于url，字段名称，中文进行了使用了encodeURIComponent()进行编码。

以前博客有介绍encodeURI和encodeURIComponent的区别

Object.prototype.serialize = function(){
	var res = [],	//存放结果的数组
		current = null,	//当前循环内的表单控件
		i,	//表单NodeList的索引
		len, //表单NodeList的长度
		k,	//select遍历索引
		optionLen,	//select遍历索引
		option, //select循环体内option
		optionValue,	//select的value
		form = this;	//用form变量拿到当前的表单，易于辨识
	
	for(i=0, len=form.elements.length; i<len; i++){
		
		current = form.elements[i];
		
		//disabled表示字段禁用，须要区分与readonly的区别
		if(current.disabled) continue;
		
		switch(current.type){
			
			//可忽略控件处理
			case "file":	//文件输入类型
			case "submit":	//提交按钮
			case "button":	//通常按钮
			case "image":	//图像形式的提交按钮
			case "reset":	//重置按钮
			case undefined:	//未定义
				break;
			
			//select控件
			case "select-one":
			case "select-multiple":
				if(current.name && current.name.length){
					console.log(current)
					for(k=0, optionLen=current.options.length; k<optionLen; k++){

						option = current.options[k];
						optionValue = "";
						if(option.selected){
							if(option.hasAttribute){
								optionValue = option.hasAttribute('value') ? option.value : option.text
							}else{
								//低版本IE须要使用特性 的specified属性，检测是否已规定某个属性
								optionValue = option.attributes('value').specified ? option.value : option.text;	
							}
							res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(optionValue));
						}
					}
				}
				break;
				
			//单选，复选框
			case "radio":
			case "checkbox":
				//这里有个取巧 的写法，这里的判断是跟下面的default相互对应。
				//若是放在其余地方，则须要额外的判断取值
				if(!current.checked) break;
			
			default:
				//通常表单控件处理
				if(current.name && current.name.length){
					res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(current.value));
				}
			
		}
	}
	
	
	return res.join("&");
}
复制代码

对HTML表单使用：

formElement.serialize();
复制代码

获得相似以下结果：a=1&b=2&c=3&d=4&e=5