當(dāng)我們有form表單而且里面的表單元素較多時(shí)，咱們總不能一個(gè)個(gè)去獲取表單元素內(nèi)的值來(lái)進(jìn)行拼接吧！這樣會(huì)很讓人蛋疼！為了方便與后臺(tái)交互并且提高自己的開(kāi)發(fā)效率，并且不讓你蛋疼；我們一起用原生來(lái)寫(xiě)一個(gè)表單序列化方法：

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比薩迦網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式薩迦網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋薩迦地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

先介紹一下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();

功能：將頁(yè)面表單序列化成一個(gè)JSON結(jié)構(gòu)的對(duì)象。注意不是JSON字符串。

比如，[{"name":"lihui", "age":"20"},{...}] 獲取數(shù)據(jù)為 jsonData[0].name；

下面我們用原聲js來(lái)實(shí)現(xiàn)我們的form表單序列化的函數(shù)；

首先我們列明步驟：

1）先獲取form表單使用ById或者是forms；

2）獲取后通過(guò)elements 取到表單中所有元素的數(shù)組；

3）之后進(jìn)行遍歷判斷類型（根據(jù)類型做相應(yīng)的對(duì)象拼接）實(shí)現(xiàn)序列化對(duì)象；

代碼如下：

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
 },

分享名稱：原生js實(shí)現(xiàn)form表單序列化的方法-創(chuàng)新互聯(lián)
本文URL：http://www.rwnh.cn/article26/pcsjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、全網(wǎng)營(yíng)銷推廣、域名注冊(cè)、品牌網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)