JavaScriptでのフォーム送信メソッド

フォームは2つの方法、GETメソッドまたはPOSTメソッドで送信できます。フォームの送信方法は、フォームの属性 method によって調整されます。

例えば、フォームにGET送信メソッドを指定してみましょう：

<form action="/handler/" method="GET">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

次に、POSTメソッドです：

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

では、2つの送信メソッドの違いを見てみましょう。 GETメソッドの場合、フォームのデータはブラウザ上で、いわゆるクエリ文字列 (query string) として表示されます。これはキーと値のペアの形式をとり、キーはフォーム要素の名前、値はそこに入力されたデータとなります。これらの値のペアはアンパサンドで区切られます。

GETメソッドで送信されたデータは、私たちのサーバーでは、データオブジェクトの get プロパティに入ります：

export default {
	'/handler/': function(data) {
		console.log(data.get); // サーバーコンソールに表示されます
		return 'form data received';
	}
}

一方、POSTメソッドで送信されたデータは、私たちのサーバーでは、データオブジェクトの post プロパティに入ります：

export default {
	'/handler/': function(data) {
		console.log(data.post); // サーバーコンソールに表示されます
		return 'form data received';
	}
}

簡潔にするために、データを個別の変数に取得するために分割代入を行うことができます：

export default {
	'/handler/': function({get, post}) {
		console.log(get);
		console.log(post);
		return 'form data received';
	}
}