複数ページのルーティングとフォームのPOST送信 (3/4)

続いて、フォームをPOST送信した時の処理について考えてみましょう。既に、アドレスによってページ処理する方法はわかりましたから、フォームを持ったページを用意して、その送信先のアドレスの処理をする、という作業はわかっています。

最大の問題は、「GETか、POSTか」をどう見分けるかという点。そしてもう１点は「送信されたフォーム情報をどう取得するか」という点でしょう。

まずは、GETとPOSTの切り分けについてです。これは実は簡単に行えます。requestイベントハンドラで引数に渡されるrequestオブジェクトの「method」を調べるだけで済みます。ハンドラ内で、こんな具合に処理を用意すればよいでしょう。

if (request.method == "GET"){
    ……GETの処理……
}
if (request.method == "POST"){
    ……POSTの処理……
}

残る「POST送信されたフォームデータの取得」は、実際にコードを見たほうがわかりやすいでしょう。――では、これもサンプルを作って説明しましょう。まずは、表示コンテンツのテンプレートからです。今回は、content1.ejsにフォームを設置し、新たに用意するcontent3.ejsで送信されたフォームの表示を行わせることにしましょう。

下にサンプルリストを掲載しておきます。まずはこれらを作成しておいてください。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※content1.ejs

<h2>※サンプルで作ったコンテンツです。</h2>
<p><%= message %></p>
<hr>
<form method="post" action="./post">
<table>
    <tr><td>ID:</td><td><input type="text" name="idname"></td></tr>
    <tr><td>PASS:</td><td><input type="password" name="pass"></td></tr>
    <tr><td></td><td><input type="submit"></td></tr>
</table>
</form>


※content3.ejs

<p>※POSTでアクセスされたコンテンツです。</p>
<p>ID: <%= idname %></p>
<p>PASS: <%= pass %></p>
<p><a href="/">戻る</a></p>