快捷導(dǎo)航

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

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

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

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

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

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

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

首先我們列明步驟：

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

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

3）之后進(jìn)行遍歷判斷類(lèi)型（根據(jù)類(lèi)型做相應(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)文章

十個(gè)免費(fèi)的web前端開(kāi)發(fā)工具詳細(xì)整理
這篇文章主要介紹了十個(gè)免費(fèi)的web前端開(kāi)發(fā)工具詳細(xì)整理的相關(guān)資料,希望通過(guò)本文大家能夠理解使用免費(fèi)web開(kāi)發(fā)工具，需要的朋友可以參考下
2017-09-09
JS對(duì)象和字符串之間互換操作實(shí)例分析
這篇文章主要介紹了JS對(duì)象和字符串之間互換操作,結(jié)合實(shí)例形式分析了javascript對(duì)象與字符串相互轉(zhuǎn)換的原理與相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
如何通過(guò)JS實(shí)現(xiàn)轉(zhuǎn)碼與解碼
這篇文章主要介紹了如何通過(guò)JS實(shí)現(xiàn)轉(zhuǎn)碼與解碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
分享ES6的7個(gè)實(shí)用技巧
本文給大家分享了es6的7個(gè)實(shí)用技巧，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2018-01-01
elementui上傳圖片回顯功能實(shí)現(xiàn)
這篇文章主要介紹了elementui上傳圖片回顯,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
JavaScript中ES6字符串?dāng)U展方法
這篇文章主要介紹了JavaScript中ES6字符串?dāng)U展方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
JavaScript前后端JSON使用方法教程
這篇文章主要給大家介紹了關(guān)于JavaScript前后端JSON使用方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
JavaScript中的prototype使用說(shuō)明
在JavaScript中并沒(méi)有類(lèi)的概念，但JavaScript中的確可以實(shí)現(xiàn)重載，多態(tài)，繼承。這些實(shí)現(xiàn)其實(shí)方法都可以用JavaScript中的引用和變量作用域結(jié)合prototype來(lái)解釋。
2010-04-04
D3.js實(shí)現(xiàn)折線圖的方法詳解
眾所周知圖表是數(shù)據(jù)圖形化的表示，通過(guò)形象的圖表來(lái)展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等等?？梢暬瘓D表可以幫助開(kāi)發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和 Web 應(yīng)用和項(xiàng)目的可靠性?，F(xiàn)在就讓我們大家一起來(lái)學(xué)習(xí)用D3.js來(lái)實(shí)現(xiàn)折線圖。
2016-09-09
JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
一般來(lái)說(shuō),JavaScript中的數(shù)組是稀疏的,也就是說(shuō),數(shù)組中的元素之間可以有空隙,因?yàn)橐粋€(gè)數(shù)組其實(shí)就是一個(gè)鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組
2012-09-09