[分享] 表單資料序列化 form serialize for jQuery and YUI

form 在開發web的人一定都很熟悉他怎麼使用,但是當要form 裡面的資料使用 GET 或者 POST的時候,每個人作法不同。
這邊筆記一下如何使用 YUI & jQuery 做 form serialize 表單資料序列化。

程式說明

簡單的HTML表單:

<form method="POST" id="sample-form"> <br></br> <label for="firstname">First name:</label><input type="text" id="firstname" name="firstname" value="Caesar" ><br></br> <label for="lastname">Last name:</label> <input type="text" id="lastname" name="lastname" value="Chi"><br></br></form><br></br>

希望做表單資料序列化(form serialize),希望有以下的產出。

firstname=Caesar&lastname=Chi<br></br>

jQuery 使用方法:

擷取到form 節點之後,再呼叫serialize 方法,會回傳字串(string)

$("#sample-form").serialize()<br></br>

YUI 使用方法(適用於 YUI3.3.0 以下版本):

首先必須引入io-form,取得Y.io之後,使用_serialize(理論上這應該是私有方法,沒辦法給外部使用,不過在3.3.0以前都可以使用此方法),裡面給予一個物件,其中一個屬性必須要為 id : form id,方法回傳之後就會取得字串。

Y.io._serialize({id: "sample-form"});<br></br>

線上範例

線上範例

完整原始碼

後記

這個方法其實行之有年,而且使用起來十分順手,而且許多好心人士都有寫模組,讓form 的傳送上變得方便許多,不用再重新自己取得DOM再取得值。

題外話,不知道為什麼YUI雖然有 form serialize 的方法和行為,可是卻沒有展示在範例當中,而且在 3.4.0的版本此方法就無法使用了,幾乎是完全和Y.io 綁定在一起,一定要發送出AJAX之後,連同 form 的資料一同帶出。

如果各位有更好的看法或者作法,歡迎提出。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn