原生JavaScript實現form表單序列化的方法
當我們有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 },
最後
為了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成為全棧工程師,乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈:866109386.歡迎大家進群交流討論,學習交流,共同進步。
當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們,祝福大家在往後的工作與面試中一切順利。