原生JS實現表單序列化serialize

2022-02-26 02:06:48 字數 1226 閱讀 3409

有乙個form表單,要用ajax後台提交,原來想拼接json,但是資料多了麻煩,不靈活。

用html5的formdata來初始化表單

var formdata=new formdata(document.getelementbyid("advform"));

看似還可以,但發現有兩個問題,

一,formdata.get()方法不知為什麼用不了

二,form data 資料格式不如jq的簡潔,

webkitformboundary29h06frzequjgqtr

var stu=;

$.ajax(,

//資料,這裡使用的是json格式進行傳輸

success : function(result)

});

這段jq提交的資料是序列化的

網查如然不用我造輪子了,轉乙個可用的

使用原生的js模擬了表單序列化,**中對表單處理盡可能地進行文字說明 

其中對於url,欄位名稱,中文進行了使用了encodeuricomponent()進行編碼。

object.prototype.serialize = function

()else

}res.push(encodeuricomponent(current.name) + "=" +encodeuricomponent(optionvalue));}}

break

;

//單選,核取方塊

case "radio":

case "checkbox":

//這裡有個取巧 的寫法,這裡的判斷是跟下面的default相互對應。

//如果放在其他地方,則需要額外的判斷取值

if(!current.checked) break

;

default

:

//一般表單控制項處理

if(current.name &¤t.name.length)}}

return res.join("&");

}

對html表單使用:

formelement.serialize();

得到類似如下結果:a=1&b=2&c=3&d=4&e=5

原生js實現form表單序列化

當我們有form表單而且裡面的表單元素較多時,咱們總不能乙個個去獲取表單元素內的值來進行拼接吧!這樣會很讓人蛋疼!為了方便與後台互動並且提高自己的開發效率,並且不讓你蛋疼 我們一起用原生來寫乙個表單序列化方法 先介紹一下jquery中有相應的表單序列化的方法 1.serialize 方法 格式 va...

表單序列化

1.serialize 方法 格式 var data form serialize 功能 將表單內容序列化成乙個字串。這樣在ajax提交表單資料時,就不用一一枚舉出每乙個引數。只需將data引數設定為 form serialize 即可。與jquery中其他方法一樣,serialize 方法也是作用...

表單序列化

1 2 對錶單字段的名稱和值進行url編碼,使用和號 分割。3 不傳送禁用的表單字段。4 只傳送勾選的核取方塊和單選按鈕。5 不傳送type為 reset 和 button 的按鈕。6 多選選擇框中的每個選中的值單獨乙個條目。7 在單擊提交表單的情況下,也會傳送提交按鈕 否則,不傳送提交按鈕。也包括...