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

近年のWebではAjaxを使った画面遷移を行わないフォームが主流となりつつあります。

AjaxではjQueryでPHPなどのプログラムにフォームに入力されたデータを投げることになりますが、これをどのように実装するかが問題です。

Ajaxでフォームのデータを投げる部分は、下記のように作るという例が載っていました。古い書籍やブログなどでは以下のような例が載っています。

data : {param1 : param1, param2 : param2 }

1	data : {param1 : param1, param2 : param2 }

フォーム項目が２０個もある時、「やってられん！」ってブチ切れ気味になってしまいますね。

jQueryの serialize() を使って簡単にフォームの内容をPOST/GETする方法があります。

これ本当に楽。今までの作業はなんだったんだ？って悲しくなります。

Contents

1 Serializeメソッド
2 注意点

Serializeメソッド

この一行でフォームの内容を一括して取得できます。

書式

var formData = $(‘form’).serialize();

formのidを設定している場合は　$(‘#sample’).serialize(); のように記載すればOK。

jQuery

<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>

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属性が無いとうまく動きませんので注意が必要です。

//serializeが動かない（name属性がない）
<input type="text" id="test">

//serializeが動く（name属性がある）
<input type="text" id="test" name="test" >

//serializeが動かない（name属性がない）

//serializeが動く（name属性がある）

関連するメソッドとして serializeArray() があります。こちらはフォームの情報を配列形式で取得します。関連記事

SearchLight