您的位置 >>> 星想互聯 >>> 編程技術 >>> JQUERY+JS
原生js實現form表單序列化
點擊數:183  發布時間2020-03-22 20:17:00
當我們有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
 },

來源:咸寧網站建設
【上一篇】鼠標拖曳特效
【下一篇】ajax請求頭設置
日本高清成 人,A级高清毛片av无码,欧美成 人 免费在线播放-首页 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>