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

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

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

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

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

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

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

Serializeメソッド

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

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

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

jQuery

注意点

serialize() ではフォームパーツの id属性ではなく、name属性を取得するので、name属性が無いとうまく動きませんので注意が必要です。

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



Author: webmaster