expressを試してみた　POST処理＆パーシャルでテーブル表示

今回は、POST処理と、パーシャルによるテーブルを作成し、表示する処理の二つを行う。

まずは、フォーム処理を扱うためのモジュール、Body Parserをインストールする。今まで通り、npmコマンドでインストールした。

次に、main.ejs（前回記事で作成したもの）のbox2-2を書き換えた。formタグを用意し、二つのinput（それぞれテキスト、送信ボタン）を用意した。これをmainファイル内で行う。

次は、jsファイルを編集する。まずは、先頭部分に以下のコードを追加した。

そして、新たにpostを追加。書き方自体はget処理と大差はない。また、フォームで送信した内容を読み取るには、

とする。＜name＞には、それぞれのinputタグに追加されたname（main.ejsファイルのtextではmessage）を追加した。

この状態で起動すると、以下のようなテキストボックスと送信ボタンができた。

早速テキストに文字を入力し、送信ボタンを押すと以下のように、テキストに書かれた内容が上に表示された。

次は、パーシャルによるテーブル表示を行う。まずは、data_item.ejsというファイルを追加する。これがテーブルのベースとなる。

次に、main.ejsのbox2-2を以下のように書き換えた。forでdataをすべて表示するまで繰り返し、data_item内に読み込まれたkeyとvalのデータをはめていっている。

次に、jsファイルを編集する。まずは、dataという変数を用意し、テーブルのデータを一つずつ作成する。今回は、五人のデータを用意した。最後に、get処理部分にdataを追加した。

この状態で実行すると、以下のような表示がされた。ちょうど五人分のデータがすべて出力されたことを確認できた。

このようにして、POST処理と、パーシャルでのテーブル表示を行った。