jQueryのserializeはform要素以外にも使えるの知ってましたか？

2013/06/08

jQueryにはserialize()という便利メソッドがあって、formの入力値をまるごとクエリ文字列に変換することができます。

クエリ文字列というのはこういうやつです。

?username=hoge&email=fuga

さてこのserialize()の使い方ですが、ぐぐるとform要素に適用するサンプルコードばかり出てきます。

$('form').serialize();

しかし実はこれ、form要素に対してだけではなく任意のDOM要素に対して適用できるんです。

つまりform丸ごとではなく、いつくかのinput要素だけピックアップしてserialize()することができるのです。

<input type="text" name="email" >
<input type="text" name="username" >

このようなinput要素がある場合に、

$('input[name=email], input[name=username]').serialize();  // "username=DQNEO&email=DQNEO@example.com"

のように使えます。

Ajaxやなんかで任意のHTTPリクエストを組み立てるときに大変便利です。
使ったことない人は一度使ってみてはいかがでしょうか。

このテクニックを知らずに自前でクエリ文字列を組み立てている人がまわりにいたら、ぜひ教えてあげてください。

カテゴリ: jQuery JavaScript