JavaScriptでのフォーム送信

皆さんは既に、ブラウザ内でJavaScriptを使用してフォーム要素を操作する方法を知っています。しかし、フォームはPHPやNodeJSで書かれたサイトのサーバーサイドで処理するために、サーバーへ送信することもできます。

これは、サーバーに保存されているサイトのデータを追加または変更するために必要です。

では、その方法を見てみましょう。いくつかの入力フィールドとボタンがあるとします：

<input>
<input>
<input type="submit">

これらの要素を form タグで囲みます。この場合、ボタンをクリックするとサーバーに送信されるフォームが作成されます：

<form>
	<input>
	<input>
	<input type="submit">
</form>

サーバー側でフォームデータを受け取るためには、各入力フィールドに一意の名前を付ける必要があります：

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

この場合、フォームデータはキーと値のペアとしてサーバーに送信されます。キーはフォーム要素の名前、値は入力されたデータです。

フォームを送信するためにサーバーは必須ではありません。上記のフォームコードを任意のファイルにコピーし、ブラウザで開いて送信ボタンを押すと、フォームは送信され、ブラウザのページがリロードされます。

しかし、サーバーがない場合、フォームデータはどこにも届きません。そのため、サーバーと一緒にフォームの動作を確認しましょう。皆さんはまだサーバーサイド言語を知らないので、学習用HTTPサーバーを使ってフォームを送信する練習をします。

フォームを何らかのファイルに配置し、http://localhost:3001/form.html というアドレスでアクセスできるようにしましょう：

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

フォームに、送信先アドレスを指定する action 属性を追加しましょう：

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

次に、server.js ファイルに、フォーム送信先アドレスのハンドラーを書きます：

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

このハンドラーのパラメータには、送信されたフォームデータが渡されます：

export default {
	'/handler/': function(data) {
		console.log(data); // サーバーコンソールに出力される
		return 'form data received';
	}
}

フォームとその処理用のファイルを作成してください。フォームを送信し、データが実際にサーバーに届いていることを確認してください。