formの内容を送信する前にチェックするserialize()関数


スポンサーリンク

serialize()メソッドを使えば、formの内容を送信する前に配列やJSONの形で格納したり、格納した値をチェックすることができます。
サンプルを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>serialize()関数</title>

<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
	$('#serialize').click(function() {
		$('#placeholder').html($('form').serialize());
	});

	$('#serialize-array').click(function() {
		$('#placeholder').html(JSON.stringify(
			$('form').serializeArray()));
	});
});


</script>

</head>
<body>

<h2>jQueryでシリアライズ</h2>

<form action="" method="post">
  <label for="first_name">名前</label>
  <input type="text" name="first_name" value="" id="first_name"><br>

  <label for="last_name">苗字</label>
  <input type="text" name="last_name" value="" id="last_name"><br>

</form>
<input type="button" name="serialize" value="Serialize" id="serialize">
<input type="button" name="serialize-array" value="SerializeArray" id="serialize-array">

<div id="placeholder"></div>
</body>
</html>


serialize()では以下のように値を取得できます

first_name=hoge&last_name=fuga

serializeArray()では配列の形で取得できます。JSON.sringifyと組み合わせると以下のように取得できます。

[{"name":"first_name","value":"hoge"},{"name":"last_name","value":"fuga"}]

f:id:sho322:20140505185011j:plain