溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
當我們有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
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
