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

? ? ? ?
?



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

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

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

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

<cite id="awyqk"></cite>