近年のWebではAjaxを使った画面遷移を行わないフォームが主流となりつつあります。
AjaxではjQueryでPHPなどのプログラムにフォームに入力されたデータを投げることになりますが、これをどのように実装するかが問題です。
Ajaxでフォームのデータを投げる部分は、下記のように作るという例が載っていました。古い書籍やブログなどでは以下のような例が載っています。
|
0 1 2 |
data : {param1 : param1, param2 : param2 } |
フォーム項目が２０個もある時、「やってられん！」ってブチ切れ気味になってしまいますね。
jQueryの serialize() を使って簡単にフォームの内容をPOST/GETする方法があります。
これ本当に楽。今までの作業はなんだったんだ？って悲しくなります。
Serializeメソッド
この一行でフォームの内容を一括して取得できます。
書式
var formData = $(‘form’).serialize();
formのidを設定している場合は $(‘#sample’).serialize(); のように記載すればOK。
jQuery
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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属性が無いとうまく動きませんので注意が必要です。
|
0 1 2 3 4 5 6 |
//serializeが動かない（name属性がない） <input type="text" id="test"> //serializeが動く（name属性がある） <input type="text" id="test" name="test" > |
関連するメソッドとして serializeArray() があります。こちらはフォームの情報を配列形式で取得します。
