原生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