JavaScriptでのAJAXを利用したPOSTリクエストの送信

それでは、サーバーにPOSTリクエストを送信してみましょう。そのためには、fetch関数の第二引数に設定オブジェクトがあります。設定のmethodでHTTPリクエストのメソッドを指定します。 POSTメソッドを指定しましょう：

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
	});
});

サーバーに送信したいデータも設定しましょう。 POSTリクエストでは、データはHTTPリクエストのボディで送信されます。そのためには、データを設定のbodyで指定する必要があります。 Query String形式でデータを指定し、対応するMIMEタイプを設定します：

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
		body: 'num1=1&num2=2',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
		},
	});
});

サーバー側でこのデータを受け取り、何らかの処理を行い、その結果をクライアントに返送してみましょう：

export default {
	'/handler/': function({ post }) {
		return Number(post.num1) + Number(post.num2);
	}
}

クライアント側にdiv要素とボタンがあります。ボタンがクリックされたら、 POSTメソッドを使用して3つの数値をサーバーに送信してください。サーバーは渡された数値の合計を計算します。その結果をdiv要素に書き込んでください。