資訊專欄INFORMATION COLUMN
摘要：表單序列化概述隨著的出現，表單的序列化已經是一個常見的需求。元素的值，就是選中的元素的屬性的值，如果元素沒有屬性，則是元素的文本值。參考高級程序設計
表單序列化 1. 概述
隨著Ajax的出現，表單的序列化已經是一個常見的需求。我們先明確表單提交時，瀏覽器是怎么樣將數據發送給服務器的
對表單字段的名稱和值進行URL編碼（調用encodeURIComponent()方法），使用&分隔，無論是get還是post請求，都是一樣的
不發送禁用的表單字段，即屬性disabled為true的
只發送勾選的復選框和單選按鈕
不發送type為reset和button的按鈕
多選選擇框中每個選擇的值多帶帶一個條目
在單擊提交按鈕表單的情況下，也會發送提交按鈕的value值，否則不發送提交按鈕。
select元素的值，就是選中的option元素的value屬性的值，如果option元素沒有value屬性，則是option元素的文本值。
2. 實現跟據上述，我們可以來實現一個表單的序列化，代碼是對《JavaScript高級程序設計》表單腳本一章中的代碼改進
增加參數驗證
將form.elements轉為數組，提高性能
改進多選選擇框，同一個參數名的值進行合并,試驗了一下，如果options沒有HTML的value屬性，讀取該option的value屬性會等于它的text屬性(測試瀏覽器 IE8，chrome)
function serialize(form) {
// 參數驗證
if(!form && form.nodeName.toUpperCase() != "FORM" ){
throw new Error("invalid parameters");
}
var encode = window.encodeURIComponent,
slice = Array.prototype.slice;
var params = [],
i = 0,
fields = slice.call(form.elements),
len = fields.length,
el,
type;
for(;i < len; i++){
el = fields[i];
type = el.type.toLowerCase();
switch(type){
case "undefined":
case "button":
case "submit":
case "reset":
case "file":
break;
case "select-one":
case "select-multiple":
if(el.name.length){
var j = 0,
opts = slice.call(el.options),
oLen = opts.length,
selected = [] , // 用于合并參數
opt;
for(; j < oLen; j++){
opt = opts[j];
if(!opt.selected)continue;
selected.push(opt.value);
}
params.push(encode(el.name) + "=" + encode(selected.join(",")));
}
break;
case "checkbox":
case "radio":
if(!el.checked){
break;
}
default:
if(el.name.length){
params.push(encode(el.name) + "=" + encode(el.value));
}
}
}
return params.join("&");
};
以上代碼在IE8會報錯，原因是option元素的實現并非一個JavaScript對象，導致無法使用slice，當然解決的方法也有，就是重寫slice函數，但是這脫離了本章節的主題。
參考《JavaScript高級程序設計》
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80169.html
摘要：表單序列化概述隨著的出現，表單的序列化已經是一個常見的需求。元素的值，就是選中的元素的屬性的值，如果元素沒有屬性，則是元素的文本值。參考高級程序設計 表單序列化 1. 概述 隨著Ajax的出現，表單的序列化已經是一個常見的需求。我們先明確表單提交時，瀏覽器是怎么樣將數據發送給服務器的 對表單字段的名稱和值進行URL編碼（調用encodeURIComponent()方法），使用&分隔，...
摘要：概述類型其實是在級定義的，它是為序列化表以及創建與表單格式相同的數據當然是用于傳輸提供便利。如果是使用表單初始化，每一個表單字段對應一條數據，它們的屬性即為值，它們屬性對應值。參考兼容性查詢高級程序設計 FormData 1. 概述 FormData類型其實是在XMLHttpRequest 2級定義的，它是為序列化表以及創建與表單格式相同的數據（當然是用于XHR傳輸）提供便利。 2. ...
摘要：支持以下自定義特性的序列化與反序列化自定義單元格類型，自定義函數，自定義格式，自定義函數迷你圖，自定義標簽，以及自定義行篩選。 Spread JSON 導入導出 在SpreadJS表單控件中可以導入導出JSON數據，收集界面的錄入數據， 數據源序列化 若要將表單中的數據源序列化到JSON對象中，可以設置參數includeBindingSource: true，若未設置默認為false....
閱讀 2946·2021-11-22 15:25
閱讀 2240·2021-11-18 10:07
閱讀 1045·2019-08-29 15:29
閱讀 472·2019-08-29 13:25
閱讀 1504·2019-08-29 12:58
閱讀 3201·2019-08-29 12:55
閱讀 2911·2019-08-29 12:28
閱讀 500·2019-08-29 12:16
