[jQuery] FormでPOST/GETの内容をたった一行で取得する方法

近年のWebではAjaxを使った画面遷移を行わないフォームが主流となりつつあります。
AjaxではjQueryでPHPなどのプログラムにフォームに入力されたデータを投げることになりますが、これをどのように実装するかが問題です。
Ajaxでフォームのデータを投げる部分は、下記のように作るという例が載っていました。古い書籍やブログなどでは以下のような例が載っています。
1 |
data : {param1 : param1, param2 : param2 } |
フォーム項目が20個もある時、「やってられん!」ってブチ切れ気味になってしまいますね。
jQueryの serialize() を使って簡単にフォームの内容をPOST/GETする方法があります。
これ本当に楽。今までの作業はなんだったんだ?って悲しくなります。
Contents
Serializeメソッド
この一行でフォームの内容を一括して取得できます。
formのidを設定している場合は $(‘#sample’).serialize(); のように記載すればOK。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript"> var formData = $('form').serialize(); $.ajax({ url: '/sample/index', type: 'GET', data: formData, timeout: 10000, dataType: 'text' }) .done(function (data) { // 通信が成功したときの処 }) .fail(function (data) { // 通信が失敗したときの処理 }) .always(function (data) { // 通信が完了したとき }); </script> |
注意点
serialize() ではフォームパーツの id属性ではなく、name属性を取得するので、name属性が無いとうまく動きませんので注意が必要です。
1 2 3 4 5 |
//serializeが動かない(name属性がない) <input type="text" id="test"> //serializeが動く(name属性がある) <input type="text" id="test" name="test" > |
関連するメソッドとして serializeArray() があります。こちらはフォームの情報を配列形式で取得します。関連記事
- [Ajax] jQueryとPHPでWebページの一部分を更新する方法
- [JQuery] Ajaxが使える状態かどうかチェックする方法
- [jQuery] フォームでマウスのフォーカスイン・アウトを判断する方法
- [jQuery] 子ウィンドウのチェックボックスの値を親ウィンドウに渡す方法
- [JQuery] Datepickerで日付をカレンダー形式で簡単に入力する方法