快捷導(dǎo)航

原生js實(shí)現(xiàn)form表單序列化的方法

更新時(shí)間：2018年08月02日 15:10:21 作者：執(zhí)著的小豬仔

這篇文章主要介紹了原生js實(shí)現(xiàn)form表單序列化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

當(dāng)我們有form表單而且里面的表單元素較多時(shí)，咱們總不能一個(gè)個(gè)去獲取表單元素內(nèi)的值來進(jìn)行拼接吧！這樣會(huì)很讓人蛋疼！為了方便與后臺(tái)交互并且提高自己的開發(fā)效率，并且不讓你蛋疼；我們一起用原生來寫一個(gè)表單序列化方法：

先介紹一下jquery中有相應(yīng)的表單序列化的方法：

1.serialize()方法

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

功能：將表單內(nèi)容序列化成一個(gè)字符串。

這樣在ajax提交表單數(shù)據(jù)時(shí)，就不用一一列舉出每一個(gè)參數(shù)。只需將data參數(shù)設(shè)置為 $("form").serialize() 即可。

2.serializeArray()方法

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

功能：將頁面表單序列化成一個(gè)JSON結(jié)構(gòu)的對(duì)象。注意不是JSON字符串。

比如，[{"name":"lihui", "age":"20"},{...}] 獲取數(shù)據(jù)為 jsonData[0].name；

下面我們用原聲js來實(shí)現(xiàn)我們的form表單序列化的函數(shù)；

首先我們列明步驟：

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

2）獲取后通過elements 取到表單中所有元素的數(shù)組；

3）之后進(jìn)行遍歷判斷類型（根據(jù)類型做相應(yīng)的對(duì)象拼接）實(shí)現(xiàn)序列化對(duì)象；

代碼如下：

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
 },

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS重學(xué)系列之聊聊new操作符
這篇文章主要給大家介紹了關(guān)于JS重學(xué)系列之new操作符的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法
這篇文章主要介紹了JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法，對(duì)算法感興趣的同學(xué)，可以參考下
2021-05-05
js實(shí)現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法,涉及onmousewheel事件及javascript操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
點(diǎn)擊頁面任何位置隱藏div的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄c(diǎn)擊頁面任何位置隱藏div的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
vue中使用cropperjs的方法
這篇文章給大家總結(jié)了在.vue文件里cropperjs的使用方法和經(jīng)驗(yàn)教訓(xùn)，感興趣的朋友跟隨腳本之家小編學(xué)習(xí)吧
2018-03-03
Javascript拖拽&拖放系列文章3之細(xì)說事件對(duì)象
Javascript中的事件對(duì)象其實(shí)和.NET中繼承自EventArgs類的派生類類似，用來給事件處理程序傳遞狀態(tài)信息，從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對(duì)象中和實(shí)現(xiàn)拖拽功能相關(guān)的幾個(gè)屬性，并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個(gè)類中，從而適應(yīng)所有的瀏覽器。
2008-09-09
JS實(shí)現(xiàn)日期時(shí)間動(dòng)態(tài)顯示的方法
這篇文章主要介紹了JS實(shí)現(xiàn)日期時(shí)間動(dòng)態(tài)顯示的方法,涉及JavaScript基于時(shí)間函數(shù)定時(shí)操作頁面元素屬性的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-12-12
JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
js中一般使用tofixed與round處理數(shù)據(jù)四舍五入，那么tofixed與round有什么區(qū)別呢？下面小編給大家分享JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別，需要的朋友參考下吧
2017-10-10
將兩個(gè)div左右并列顯示并實(shí)現(xiàn)點(diǎn)擊標(biāo)題切換內(nèi)容
將兩個(gè)div左右并列顯示并實(shí)現(xiàn)點(diǎn)擊標(biāo)題切換內(nèi)容的效果，接下來為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過
2013-10-10
在JavaScript中使用高階函數(shù)的方法
JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力以及其他特點(diǎn)，使JavaScript成為非常適合函數(shù)式編程的編程語言之一，這篇文章主要介紹了如何在JavaScript中使用高階函數(shù),需要的朋友可以參考下
2022-09-09