隨著 Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種常見(jiàn)需求。在 JavaScript中，可 以利用表單字段的 type 屬性，連同 name 和 value 屬性一起實(shí)現(xiàn)對(duì)表單的序列化。在編寫代碼之前， 有必須先搞清楚在表單提交期間，瀏覽器是怎樣將數(shù)據(jù)發(fā)送給服務(wù)器的。
? ? ? ? ◎?qū)Ρ韱巫侄蔚拿Q和值進(jìn)行 URL編碼，使用和號(hào)（&）分隔。?
? ? ? ? ◎不發(fā)送禁用的表單字段。
? ? ? ? ◎只發(fā)送勾選的復(fù)選框和單選按鈕。
? ? ? ? ◎不發(fā)送 type 為"reset"和"button"的按鈕。
? ? ? ? ◎多選選擇框中的每個(gè)選中的值單獨(dú)一個(gè)條目。
? ? ? ? ◎在單擊提交按鈕提交表單的情況下，也會(huì)發(fā)送提交按鈕；否則，不發(fā)送提交按鈕。也包括 type 為"image"的元素。
? ? ? ? ◎元素的值，就是選中的元素的 value 特性的值。如果元素沒(méi)有 value 特性，則是元素的文本值。?
? ? ? ?在表單序列化過(guò)程中，一般不包含任何按鈕字段，因?yàn)榻Y(jié)果字符串很可能是通過(guò)其他方式提交的。 除此之外的其他上述規(guī)則都應(yīng)該遵循。接下來(lái)南昌網(wǎng)絡(luò)公司百恒網(wǎng)絡(luò)前端開(kāi)發(fā)工程師介紹實(shí)現(xiàn)表單序列化的代碼。?



? ? ? ?

? ? ? ?

? ? ? ? ? ? ?

Red
? ? ? ? ? ? ?

Green

? ? ? ? ? ? ?

Blue

? ? ? ?

? ? ? ?

Locations

? ? ? ?Where do you want to live?
? ? ? ?
? ? ? ? ? ? ? Sunnyvale
? ? ? ? ? ? ? Los Angeles
? ? ? ? ? ? ? Mountain View
? ? ? ? ? ? ? China
? ? ? ? ? ? ? Australia
? ? ? ?

? ? ? ?Where do you want to work?
? ? ? ?
? ? ? ? ? ? ? Sunnyvale
? ? ? ? ? ? ? Los Angeles
? ? ? ? ? ? ? Mountain View
? ? ? ? ? ? ? China
? ? ? ? ? ? ? Australia
? ? ? ?

? ? ? ?
?



? ? ? ?上面這個(gè) serialize()函數(shù)首先定義了一個(gè)名為 parts 的數(shù)組，用于保存將要?jiǎng)?chuàng)建的字符串的各 個(gè)部分。然后，通過(guò) for 循環(huán)迭代每個(gè)表單字段，并將其保存在 field 變量中。在獲得了一個(gè)字段的 引用之后，使用 switch 語(yǔ)句檢測(cè)其 type 屬性。序列化過(guò)程中麻煩的就是元素，它可能 是單選框也可能是多選框。為此，需要遍歷控件中的每一個(gè)選項(xiàng)，并在相應(yīng)選項(xiàng)被選中的情況下向數(shù)組 中添加一個(gè)值。對(duì)于單選框，只可能有一個(gè)選中項(xiàng)，而多選框則可能有零或多個(gè)選中項(xiàng)。這里的代碼適 用于這兩種選擇框，至于可選項(xiàng)的數(shù)量則是由瀏覽器控制的。在找到一個(gè)選中項(xiàng)之后，需要確定使用什 么值。如果不存在 value 特性，或者雖然存在該特性，但值為空字符串，都要使用選項(xiàng)的文本來(lái)代替。 為檢查這個(gè)特性，在 DOM 兼容的瀏覽器中需要使用 hasAttribute()方法，而在 IE 中需要使用特性 的 specified 屬性。?
? ? ? ?如果表單中包含

元素，則該元素會(huì)出現(xiàn)在元素集合中，但沒(méi)有 type 屬性。因此，如果 type 屬性未定義，則不需要對(duì)其進(jìn)行序列化。同樣，對(duì)于各種按鈕以及文件輸入字段也是如此（文件輸入字段在 表單提交過(guò)程中包含文件的內(nèi)容；但是，這個(gè)字段是無(wú)法模仿的，序列化時(shí)一般都要忽略）。對(duì)于單選按鈕 和復(fù)選框，要檢查其 checked 屬性是否被設(shè)置為 false，如果是則退出 switch 語(yǔ)句。如果 checked 屬性
為true，則繼續(xù)執(zhí)行 default 語(yǔ)句，即將當(dāng)前字段的名稱和值進(jìn)行編碼，然后添加到 parts 數(shù)組中。函數(shù) 的后一步，就是使用 join()格式化整個(gè)字符串，也就是用和號(hào)來(lái)分隔每一個(gè)表單字段。?
? ? ? ?最后，serialize()函數(shù)會(huì)以查詢字符串的格式輸出序列化之后的字符串。當(dāng)然，要序列化成其他 格式，也不是什么困難的事。?

? ?本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://www.527701.com/ 如轉(zhuǎn)載請(qǐng)注明出處!

• 上一篇
• 返回列表
• 下一篇