當(dāng)我們有form表單而且里面的表單元素較多時(shí)蚯姆,咱們總不能一個(gè)個(gè)去獲取表單元素內(nèi)的值來進(jìn)行拼接吧硫麻!這樣會(huì)很讓人蛋疼!為了方便與后臺(tái)交互并且提高自己的開發(fā)效率官硝,并且不讓你蛋疼
矗蕊;我們一起用原生來寫一個(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();
功能:將頁面表單序列化成一個(gè)JSON結(jié)構(gòu)的對(duì)象岖研。注意不是JSON字符串卿操。
比如,[{"name":"lihui", "age":"20"},{...}] 獲取數(shù)據(jù)為 jsonData[0].name缎玫;
下面我們用原聲js來實(shí)現(xiàn)我們的form表單序列化的函數(shù)硬纤;
首先我們列明步驟:
1)先獲取form表單使用ById或者是forms解滓;
2)獲取后通過elements 取到表單中所有元素的數(shù)組赃磨;
3)之后進(jìn)行遍歷判斷類型(根據(jù)類型做相應(yīng)的對(duì)象拼接)實(shí)現(xiàn)序列化對(duì)象;
代碼如下: