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