JavaScriptでのフォーム送信メソッド

フォームは2つの方法、GETメソッドまたはPOSTメソッドで送信できます。 フォームの送信方法は、フォームの属性 method によって調整されます。

例えば、フォームにGET送信メソッドを指定してみましょう：

public/form.html<form action="/handler/" method="GET">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

次に、POSTメソッドです：

public/form.html<form action="/handler/" method="POST">
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

では、2つの送信メソッドの違いを見てみましょう。 GETメソッドの場合、フォームのデータはブラウザ上で、いわゆる クエリ文字列 (query string) として表示されます。これは キーと値のペア の形式をとり、 キーはフォーム要素の名前、値はそこに入力されたデータとなります。 これらの値のペアはアンパサンドで区切られます。

GETメソッドで送信されたデータは、 私たちのサーバーでは、データオブジェクトの get プロパティに入ります：

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.get); // サーバーコンソールに表示されます
    return 'form data received';
  }
}

一方、POSTメソッドで送信されたデータは、 私たちのサーバーでは、データオブジェクトの post プロパティに入ります：

server.jsexport default {
  '/handler/': function(data) {
    console.log(data.post); // サーバーコンソールに表示されます
    return 'form data received';
  }
}

簡潔にするために、データを個別の変数に取得するために分割代入を行うことができます：

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