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

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

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

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

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

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

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