當我們有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.歡迎大家進群交流討論，學習交流，共同進步。

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

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么辦的前端程序員們，祝福大家在往后的工作與面試中一切順利。

總結

以上是生活随笔為你收集整理的原生js实现form表单序列化的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。