Javascript表單序列化原理及實(shí)現(xiàn)代碼詳解
隨著 Ajax 的出現(xiàn)，表單序列化已經(jīng)成為一種常見需求。在 JavaScript 中，可 以利用表單字段的 type 屬性，連同 name 和 value 屬性一起實(shí)現(xiàn)對表單的序列化。在編寫代碼之前， 有必須先搞清楚在表單提交期間，瀏覽器是怎樣將數(shù)據(jù)發(fā)送給服務(wù)器的。
1. 對表單字段的名稱和值進(jìn)行 URL 編碼，使用和號（&）分隔。
2. 不發(fā)送禁用的表單字段。
3. 只發(fā)送勾選的復(fù)選框和單選按鈕。
4. 不發(fā)送 type 為"reset"和"button"的按鈕。
5. 多選選擇框中的每個(gè)選中的值單獨(dú)一個(gè)條目。
6. 在單擊提交按鈕提交表單的情況下，也會發(fā)送提交按鈕；否則，不發(fā)送提交按鈕。
7. <select>元素的值，就是選中的<option>元素的 value 特性的值。如果<option>元素沒有 value 特性，則是<option>元素的文本值。
在表單序列化過程中，一般不包含任何按鈕字段，因?yàn)榻Y(jié)果字符串很可能是通過其他方式提交的。除此之外的其他上述規(guī)則都應(yīng)該遵循。
基本的表單序列化可以通過遍歷表單元素實(shí)現(xiàn)，實(shí)例代碼如下：
function serialize(form){
var params = [];
var eles = form.elements;
for (var i = 0;i<ele.length;i++){
let field = ele[i];
switch(field.type){
case "file":
case "submit":
case "reset":
case "button":
break;
case "radio":
case "checkbox":
if(!field.checked){
break;
}
default:
//不包含沒有名字的表單字段
if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近應(yīng)項(xiàng)目要求，需要對table中的數(shù)據(jù)進(jìn)行升序或降序排列，于是研究了一下js，希望對大家有幫助。2011-08-08
在js中，想讓線程sleep一下確實(shí)不是一件簡單的事情，過多的使用定時(shí)器或者回調(diào)函數(shù)，會讓復(fù)雜，凌亂，這時(shí)，可以考慮能否使用隊(duì)列來做一些簡2012-07-07
JavaScript動(dòng)態(tài)設(shè)置div的樣式的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)設(shè)置div的樣式的方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JavaScript獲取按鈕所在form表單id的方法,涉及javascript操作表單按鈕屬性的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了微信小程序 點(diǎn)擊生成朋友圈分享圖,本文給大家分享小編在實(shí)現(xiàn)此功能時(shí)遇到的各種坑，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
javascript實(shí)現(xiàn)Email郵件顯示與刪除功能
這篇文章主要介紹了javascript實(shí)現(xiàn)Email郵件顯示與刪除功能，需要的朋友可以參考下2015-11-11
DWR是一個(gè)框架，簡單的說就是能夠在javascript直接調(diào)用java方法，而不必去寫一大堆的javascript代碼。它的實(shí)現(xiàn)是基于ajax的，可以實(shí)現(xiàn)無刷新效果。不少DWR的例子，但大都只是某種方法的調(diào)用只在使用層面上介紹DWR，并不涉更多的技術(shù)與設(shè)計(jì)javascript中是如何調(diào)用的。2016-05-05
js跨域我用的比較多的就是jsonp和程序代理。但是jsonp只能用get，而且是js異步調(diào)用，有時(shí)候不能滿足項(xiàng)目要求2012-08-08
整理的比較全的event對像在ie與firefox瀏覽器中的區(qū)別。2009-09-09
利用prop-types第三方庫對組件的props中的變量進(jìn)行類型檢測
本篇文章主要介紹了利用prop-types第三方庫對組件的props中的變量進(jìn)行類型檢測的相關(guān)知識，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05