原生js實現(xiàn)form表單序列化的方法
當(dāng)我們有form表單而且里面的表單元素較多時，咱們總不能一個個去獲取表單元素內(nèi)的值來進(jìn)行拼接吧！這樣會很讓人蛋疼！為了方便與后臺交互并且提高自己的開發(fā)效率，并且不讓你蛋疼；我們一起用原生來寫一個表單序列化方法：
先介紹一下jquery中有相應(yīng)的表單序列化的方法：
1.serialize()方法
格式：var data = $("form").serialize();
功能：將表單內(nèi)容序列化成一個字符串。
這樣在ajax提交表單數(shù)據(jù)時，就不用一一列舉出每一個參數(shù)。只需將data參數(shù)設(shè)置為 $("form").serialize() 即可。
2.serializeArray()方法
格式：var jsonData = $("form").serializeArray();
功能：將頁面表單序列化成一個JSON結(jié)構(gòu)的對象。注意不是JSON字符串。
比如，[{"name":"lihui", "age":"20"},{...}] 獲取數(shù)據(jù)為 jsonData[0].name；
下面我們用原聲js來實現(xiàn)我們的form表單序列化的函數(shù)；
首先我們列明步驟：
1）先獲取form表單使用ById或者是forms；
2）獲取后通過elements 取到表單中所有元素的數(shù)組；
3）之后進(jìn)行遍歷判斷類型（根據(jù)類型做相應(yīng)的對象拼接）實現(xiàn)序列化對象；
代碼如下：
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
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JS重學(xué)系列之new操作符的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法
這篇文章主要介紹了JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法，對算法感興趣的同學(xué)，可以參考下2021-05-05
js實現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法
這篇文章主要介紹了js實現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法,涉及onmousewheel事件及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
下面小編就為大家?guī)硪黄c擊頁面任何位置隱藏div的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章給大家總結(jié)了在.vue文件里cropperjs的使用方法和經(jīng)驗教訓(xùn)，感興趣的朋友跟隨腳本之家小編學(xué)習(xí)吧2018-03-03
Javascript拖拽&拖放系列文章3之細(xì)說事件對象
Javascript中的事件對象其實和.NET中繼承自EventArgs類的派生類類似，用來給事件處理程序傳遞狀態(tài)信息，從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對象中和實現(xiàn)拖拽功能相關(guān)的幾個屬性，并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個類中，從而適應(yīng)所有的瀏覽器。2008-09-09
這篇文章主要介紹了JS實現(xiàn)日期時間動態(tài)顯示的方法,涉及JavaScript基于時間函數(shù)定時操作頁面元素屬性的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下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
將兩個div左右并列顯示并實現(xiàn)點擊標(biāo)題切換內(nèi)容
將兩個div左右并列顯示并實現(xiàn)點擊標(biāo)題切換內(nèi)容的效果，接下來為大家詳細(xì)介紹下js中時如何實現(xiàn)的，感興趣的朋友不要錯過2013-10-10
JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力以及其他特點，使JavaScript成為非常適合函數(shù)式編程的編程語言之一，這篇文章主要介紹了如何在JavaScript中使用高階函數(shù),需要的朋友可以參考下2022-09-09