使用原生的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