連載：jQuery逆引きリファレンス

jQuery 1.4編

フォームからの入力値をJSON形式の文字列に変換するには？
− serializeArray() −

山田 祥寛（http://www.wings.msn.to/）
2010/08/27

　serializeArrayメソッドは、フォームからの入力値をまとめてシリアライズします。serializeメソッドにも似ていますが、serializeメソッドが戻り値として文字列を返すのに対して、serializeArrayメソッドはオブジェクト・リテラルの形式で返す点が異なります。serializeArrayメソッドの戻り値は、そのまま$.ajaxメソッドの引数として渡すこともできます。

　具体的な例も見てみましょう。以下は、フォームの入力値をオブジェクトに変換したものを、$.eachメソッドを使ってページ下部にリスト表示する例です。

<script type="text/javascript">

$(function() {

  $('#btn').click(function() {
    var obj = $('form').serializeArray();
    $.each(obj, function(index, item) {
      $('body').append(item.name + ":" + item.value + "<br />");
    });
  });
});

</script>

  ……中略……

<form>
  書名：<input type="text" name="title" /><br />
  出版社：
  <select name="publish">
    <option value="技術評論社">技術評論社</option>
    <option value="翔泳社">翔泳社</option>
    <option value="秀和システム">秀和システム</option>
  </select><br />
  ジャンル：
  <input type="checkbox" name="category" value="program" />
    プログラミング
  <input type="checkbox" name="category" value="arch" />
    アーキテクト
  <input type="checkbox" name="category" value="db" />
    データベース
  <br />
  <input type="button" id="btn" value="送信" />
  <div id="result"></div>
</form>
リスト146 フォームからの入力値をまとめてシリアライズ（SerializeArray.html）

ブラウザで開く

リスト146の実行結果


　INDEX
　 jQuery逆引きリファレンス
　  1．セレクタ編
　  2．属性＆コンテンツ編
　  3．トラバーシング編
　  4．要素の操作＆ユーティリティ編
　  5．コア編
　  6．イベント編
　  7．エフェクト編
　  8．Ajax編（前編）
　  9．Ajax編（後編）
  10．jQuery 1.4編
　
インデックス・ページヘ 　「jQuery逆引きリファレンス」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH