JavaScriptでのフォーム送信

皆さんは既に、ブラウザ内でJavaScriptを使用してフォーム要素を操作する方法を知っています。 しかし、フォームはPHPやNodeJSで書かれたサイトのサーバーサイドで処理するために、サーバーへ送信することもできます。

これは、サーバーに保存されているサイトのデータを追加または変更するために必要です。

では、その方法を見てみましょう。いくつかの入力フィールドとボタンがあるとします：

html<input>
<input>
<input type="submit">

これらの要素を form タグで囲みます。 この場合、ボタンをクリックするとサーバーに送信されるフォームが作成されます：

html<form>
  <input>
  <input>
  <input type="submit">
</form>

サーバー側でフォームデータを受け取るためには、各入力フィールドに一意の名前を付ける必要があります：

html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

この場合、フォームデータは キーと値のペア としてサーバーに送信されます。キーはフォーム要素の名前、値は入力されたデータです。

フォームを送信するためにサーバーは必須ではありません。上記のフォームコードを任意のファイルにコピーし、ブラウザで開いて送信ボタンを押すと、フォームは送信され、ブラウザのページがリロードされます。

しかし、サーバーがない場合、フォームデータはどこにも届きません。そのため、サーバーと一緒にフォームの動作を確認しましょう。 皆さんはまだサーバーサイド言語を知らないので、学習用HTTPサーバーを使ってフォームを送信する練習をします。

フォームを何らかのファイルに配置し、http://localhost:3001/form.html というアドレスでアクセスできるようにしましょう：

public/form.html<form>
  <input name="test1">
  <input name="test2">
  <input type="submit">
</form>

フォームに、送信先アドレスを指定する action 属性を追加しましょう：

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

次に、server.js ファイルに、フォーム送信先アドレスのハンドラーを書きます：

server.jsexport default {
  '/handler/': function() {
    return 'form data received';
  }
}

このハンドラーのパラメータには、送信されたフォームデータが渡されます：

server.jsexport default {
  '/handler/': function(data) {
    console.log(data); // サーバーコンソールに出力される
    return 'form data received';
  }
}