原生JavaScript實現form表單序列化的方法

當咱們有form表單並且裏面的表單元素較多時，我們總不能一個個去獲取表單元素內的值來進行拼接吧！這樣會很讓人蛋疼！爲了方便與後臺交互而且提升本身的開發效率，而且不讓你蛋疼；咱們一塊兒用原生來寫一個表單序列化方法：

先介紹一下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）以後進行遍歷判斷類型（根據類型作相應的對象拼接）實現序列化對象；

代碼以下：

function formser(form){
 var form=document.getElementById(form);
 var arr={};
 for (var i = 0; i < form.elements.length; i++) {
 var feled=form.elements[i];
 switch(feled.type) {
 case undefined:
 case 'button':
 case 'file':
 case 'reset':
 case 'submit':
 break;
 case 'checkbox':
 case 'radio':
 if (!feled.checked) {
 break;
 }
 default:
 if (arr[feled.name]) {
 arr[feled.name]=arr[feled.name]+','+feled.value;
 }else{
 arr[feled.name]=feled.value;
  
 } 
 }
 }
 return arr
 },

最後

爲了幫助你們讓學習變得輕鬆、高效，給你們免費分享一大批資料，幫助你們在成爲全棧工程師，乃至架構師的路上披荊斬棘。在這裏給你們推薦一個前端全棧學習交流圈：866109386.歡迎你們進羣交流討論，學習交流，共同進步。

當真正開始學習的時候不免不知道從哪入手，致使效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術須要重點掌握，學習時頻繁踩坑，最終浪費大量時間，因此有有效資源仍是頗有必要的。

最後祝福全部遇到瓶疾且不知道怎麼辦的前端程序員們，祝福你們在日後的工做與面試中一切順利。