jQuery 入門 | Ajax の使用 | Ajax と Form 要素 .serialize()

Ajax と Form 要素

Ajax では、サーバーとの非同期通信のために、form 要素を通じて入力されたデータをシリアライズして送信する。

ここでいうシリアライズとは、入力された複数のデータを 1 つのクエリ文字列にすることを意味する。
これにより、form 要素を通じて入力されたデータを一度にサーバーへ送信できるようになる。

シリアライズ

jQuery では、HTML form 要素を通じて入力されたデータのシリアライズ処理を非常に簡単に実行できる。
.serialize() メソッドと .serializeArray() メソッドを利用して、簡単にデータをシリアライズできる。 .serialize() メソッドは、HTML form 要素を通じて入力されたデータをクエリ文字列に変換する。
.serializeArray() メソッドは serialize() メソッドとは異なり、入力されたデータを文字列ではなく配列オブジェクトに変換する。

次の例は、<form> 要素に .serialize() を適用した値を表示する。

function showValues() {
    $("#text").text($("form").serialize());
}
$("input[type='text']").on("keydown", showValues);
$("input[type='checkbox'], input[type='radio']").on("click", showValues);
$("select").on("change", showValues);

コード実行

韓国語を含む入力データがクエリ文字列に変換されるときは、パーセントエンコーディングによって変換される。
このとき、すべての韓国語文字はパーセント記号（%）を含む 16 進数の値に変換される。

参考

• https://api.jquery.com/serialize/