隨著 Ajax的出現，表單序列化已經成為一種常見需求。在 JavaScript中，可 以利用表單字段的 type 屬性，連同 name 和 value 屬性一起實現對表單的序列化。在編寫代碼之前， 有必須先搞清楚在表單提交期間，瀏覽器是怎樣將數據發送給服務器的。
? ? ? ? ◎對表單字段的名稱和值進行 URL編碼，使用和號（&）分隔。?
? ? ? ? ◎不發送禁用的表單字段。
? ? ? ? ◎只發送勾選的復選框和單選按鈕。
? ? ? ? ◎不發送 type 為"reset"和"button"的按鈕。
? ? ? ? ◎多選選擇框中的每個選中的值單獨一個條目。
? ? ? ? ◎在單擊提交按鈕提交表單的情況下，也會發送提交按鈕；否則，不發送提交按鈕。也包括 type 為"image"的元素。
? ? ? ? ◎元素的值，就是選中的元素的 value 特性的值。如果元素沒有 value 特性，則是元素的文本值。?
? ? ? ?在表單序列化過程中，一般不包含任何按鈕字段，因為結果字符串很可能是通過其他方式提交的。 除此之外的其他上述規則都應該遵循。接下來南昌網絡公司百恒網絡前端開發工程師介紹實現表單序列化的代碼。?



? ? ? ?

? ? ? ?

? ? ? ? ? ? ?

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
? ? ? ?

? ? ? ?
?



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

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

? ?本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣大技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡 http://www.527701.com/ 如轉載請注明出處!

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