【jQuery】serializeとserializeArray関数の使い方

jQuery の serialize と serializeArray 関数の使い方です。

serialize関数

入力された全ての Element をURLエンコードencodeURIComponentされたクエリ文字列にシリアライズします。 シリアライズされるフォーム要素は name 属性を持っている必要があります。チェックボックスとラジオボタンはチェックされている場合にのみシリアライズされる文字列に含まれます。

以下のHTMLフォームでシリアライズ結果を確認します。

<form action="send">
  <input type="text" name="user" placeholder="ユーザー名"><br>
  <input type="radio" name="gender" value="male" checked="checked">男
  <input type="radio" name="gender" value="female">女<br>
  <select name="single">
    <option>東京</option>
    <option>神奈川</option>
    <option>千葉</option>
  </select><br>
  <input type="text" name="url" placeholder="サイトURL"><br>
  <button type="submit" name="action" value="send">Submit</button>
</form>

シリアライズ結果は以下の通りです。

<script type="text/javascript">
  $(function() {
    $('form').submit(function(event) {
      event.preventDefault();
      console.log($(this).serialize());
    });
  });
</script>

// シリアライズ結果
user=tasukujp&gender=male&single=%E6%9D%B1%E4%BA%AC&url=http%3A%2F%2Fwww.task-notes.com

serialize自体は<input> <textarea> <select> <keygen>などの復数のフォーム要素を選択した jQuery オブジェクトに適用することもできますが、<form>を選択するほうが一般的に容易です。

console.log($('input, select').serialize());

// 特定の要素だけを指定することも可能
user=tasukujp&gender=male&single=%E6%9D%B1%E4%BA%AC&url=http%3A%2F%2Fwww.task-notes.com

 .serialize() | jQuery API Documentation

serializeArray関数

serializeArrayはserializeでURLエンコードしてクエリ文字列に連結する前のデータを作成する関数になります。つまり、戻り値のデータ構造が違うだけで内容は同じものです。こちらの場合は配列に要素の name と value で構成されるオブジェクトが格納されて返却されます。

<script type="text/javascript">
  $(function() {
    $('form').submit(function(event) {
      event.preventDefault();
      console.log(JSON.stringify($(this).serializeArray()));
    });
  });
</script>

// シリアライズ結果をJSON文字列に変換
[{"name":"user","value":"tasukujp"},{"name":"gender","value":"male"},{"name":"single","value":"東京"},{"name":"url","value":"http://www.task-notes.com"}]

serializeと同様に特定の要素だけを指定することも可能です。

console.log(JSON.stringify($('input, select').serializeArray()));

// 特定の要素だけを指定することも可能
[{"name":"user","value":"tasukujp"},{"name":"gender","value":"male"},{"name":"single","value":"東京"},{"name":"url","value":"http://www.task-notes.com"}]

 .serializeArray() | jQuery API Documentation