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

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

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

public/index.html<form action="" method="GET">
  <input name="num1">
  <input name="num2">
  <input type="submit">
</form>

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

public/client.jslet form = document.querySelector('form');

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

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

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

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