資訊專欄INFORMATION COLUMN
摘要：瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器對表單字段的名稱和值進(jìn)行編碼，使用和號分隔不發(fā)送禁用的表單字段只發(fā)送勾選的復(fù)選框和單選按鈕不發(fā)送為和的按鈕多選框中每個選中的值多帶帶一個條目在單擊提交按鈕提交表單的情況下，也會發(fā)送提交按鈕。否則不發(fā)送提交按鈕。
瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器：
對表單字段的名稱和值進(jìn)行URL編碼，使用和號（&）分隔
不發(fā)送禁用的表單字段
只發(fā)送勾選的復(fù)選框和單選按鈕
不發(fā)送type為“reset”和“button”的按鈕
多選框中每個選中的值多帶帶一個條目
在單擊提交按鈕提交表單的情況下，也會發(fā)送提交按鈕。否則不發(fā)送提交按鈕。也包括type為“image”的input元素
select元素的值，就是選中的option元素的value特性值
實(shí)現(xiàn)表單序列化的代碼：
function serialize(form) {
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for (var i = 0, len = form.elements.length; i < len; i++) {
field = form.elements[i];
switch (field.type) {
case "select-one":
case "select-multiple":
if (field.name.length) {
for (var j = 0, optLen = field.options.length; j < optLen; j++) {
option = field.options[j];
if (option.selected) {
optValue = "";
if (option.hasAttributes) {
optValue = ((option.hasAttributes("value")) ? option.value : option.text);
} else {
optValue = (option.attributes("value").specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined:
case "file":
case "submit":
case "reset":
case "button":
break;
case "radio":
case "checkbox":
if (!field.checked) {
break;
}
//這里沒有break
default:
if (field.name.length) {
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
};
return parts.join("&");
}
這個函數(shù)首先定義了一個名為parts的數(shù)組，用于保存要創(chuàng)建的字符串的各個部分；
然后通過for循環(huán)迭代每個表單字段，并將其保存在field變量中；
用switch語句檢測type屬性；
最麻煩的就是select元素，因?yàn)樗袉芜x和多選之分，還要檢查是否存在value值，如果不存在就獲取其text值，在DOM兼容的瀏覽器中需要使用hasAttribute()方法，在IE中則需要使用specified屬性；
對于fieldset元素，沒有type屬性就不需要序列化；
其他諸如按鈕文件輸入字段等等都要忽略；
最后對于單選按鈕和復(fù)選框，要檢查其checked屬性是否為false，如果是則退出switch語句；如果為true，則繼續(xù)執(zhí)行default語句（所以checkbox的break行代碼后面沒有break，而是default）；
default語句則是將當(dāng)前字段的名稱和值進(jìn)行編碼并添加到parts數(shù)組中；
最后就是利用join()函數(shù)格式化整個字符。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78574.html
摘要：表單序列化概述隨著的出現(xiàn)，表單的序列化已經(jīng)是一個常見的需求。元素的值，就是選中的元素的屬性的值，如果元素沒有屬性，則是元素的文本值。參考高級程序設(shè)計 表單序列化 1. 概述 隨著Ajax的出現(xiàn)，表單的序列化已經(jīng)是一個常見的需求。我們先明確表單提交時，瀏覽器是怎么樣將數(shù)據(jù)發(fā)送給服務(wù)器的 對表單字段的名稱和值進(jìn)行URL編碼（調(diào)用encodeURIComponent()方法），使用&分隔，...
摘要：表單序列化概述隨著的出現(xiàn)，表單的序列化已經(jīng)是一個常見的需求。元素的值，就是選中的元素的屬性的值，如果元素沒有屬性，則是元素的文本值。參考高級程序設(shè)計 表單序列化 1. 概述 隨著Ajax的出現(xiàn)，表單的序列化已經(jīng)是一個常見的需求。我們先明確表單提交時，瀏覽器是怎么樣將數(shù)據(jù)發(fā)送給服務(wù)器的 對表單字段的名稱和值進(jìn)行URL編碼（調(diào)用encodeURIComponent()方法），使用&分隔，...
摘要：在表單提交時，瀏覽器會自動進(jìn)行一系列的校驗(yàn)工作，沒有通過校驗(yàn)的表單是無法提交到服務(wù)器的。而方法提交表單，會在請求中發(fā)送表單字段鍵值對。表單提交事件表單提交到服務(wù)器時，會觸發(fā)事件。 上一篇主要溫習(xí)了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。 表單操作 取值 用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...
閱讀 2531·2021-09-24 10:29
閱讀 3813·2021-09-22 15:46
閱讀 2581·2021-09-04 16:41
閱讀 2986·2019-08-30 15:53
閱讀 1267·2019-08-30 14:24
閱讀 3061·2019-08-30 13:19
閱讀 2177·2019-08-29 14:17
閱讀 3527·2019-08-29 12:55
