原生js實現form表單序列化

標籤：for   mit   bre   元素   turn   函數   方法   logs   element   

大家都知道在jquery中有相應的表單序列化的方法：

1.serialize()方法

　　格式：var data = $("form").serialize();

　　功能：將表單內容序列化成一個字串。

　　這樣在ajax提交表單資料時，就不用一一列舉出每一個參數。只需將data參數設定為 $("form").serialize() 即可。

2.serializeArray()方法

　　格式：var jsonData = $("form").serializeArray();

　　功能：將頁面表單序列化成一個JSON結構的對象。注意不是JSON字串。

　　比如，[{"name":"lihui", "age":"20"},{...}] 擷取資料為 jsonData[0].name

下面我們用原聲js來實現我們的form表單序列化的函數；

首先我們列明步驟：

1）先擷取form表單使用ById或者是forms；

2）擷取後通過elements 取到表單中所有元素的數組；

3）之後進行遍曆判斷類型（根據類型做相應的對象拼接）實現序列化對象；

代碼如下：

 1 function formser(form){ 2  var form=document.getElementById(form); 3  var arr={}; 4  for (var i = 0; i < form.elements.length; i++) { 5  var feled=form.elements[i]; 6  switch(feled.type) { 7  case undefined: 8  case ‘button‘: 9  case ‘file‘:10  case ‘reset‘:11  case ‘submit‘:12  break;13  case ‘checkbox‘:14  case ‘radio‘:15  if (!feled.checked) {16  break;17  }18  default:19  if (arr[feled.name]) {20  arr[feled.name]=arr[feled.name]+‘,‘+feled.value;21  }else{22  arr[feled.name]=feled.value;23  24  } 25  }26  }27  return arr28  },

 

原生js實現form表單序列化