利用原生js實現form表單序列化（圖文教學）

以下是我要幫大家整理的原生js實作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 &#39;button&#39;:
  case &#39;file&#39;:
  case &#39;reset&#39;:
  case &#39;submit&#39;:
  break;
  case &#39;checkbox&#39;:
  case &#39;radio&#39;:
  if (!feled.checked) {
  break;
  }
  default:
  if (arr[feled.name]) {
  arr[feled.name]=arr[feled.name]+&#39;,&#39;+feled.value;
  }else{
  arr[feled.name]=feled.value;
  }
  }
  }
  return arr
}

上面是我整理給大家的原生js實作form表單序列化，希望今後對大家有幫助。

相關文章：

JS怎麼實作滑動拼圖驗證碼

#vuejs中v -if和v-show使用詳解

#來源生Node.js註冊郵箱啟動說明詳解

#

以上是利用原生js實現form表單序列化（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！