FormDataを使用したJavaScriptでのAJAXフォーム送信

FormDataを使用すると、フォームのすべてのフィールドを自動的にサーバーに送信できます。その方法を見てみましょう。

次のフォームがあり、入力フィールドには name属性が付与されているとします:

<form action="" method="GET">
	<input name="num1">
	<input name="num2">
	<input type="submit">
</form>

このフォームをAJAXで送信してみましょう。まず、変数にフォームへの参照を取得します:

let form = document.querySelector('form');

次に、リクエストボディのデータとして FormDataオブジェクトを指定します。このオブジェクトにはパラメータとしてフォームへの参照を渡します:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // フォームへの参照を渡す
	});
	
	event.preventDefault();
});

結果として、サーバー側では name属性からの名前を使って入力フィールドの値を取得できます:

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

5つの入力フィールドを持つフォームがあり、そこに数字が入力されます。このフォームをPOSTメソッドでサーバーに送信してください。サーバーは入力された数字の算術平均を見つけ、結果をブラウザに返送するものとします。