前回はクエリパラメーターを利用してサーバーにデータを送る方法を勉強しました
URLにクエリをプラスして送信するという方法です
しかし、あの方法は実用的とはいいがたい方法です
ユーザーに毎回URLの末尾にクエリを入れて送信してもらうというのは現実的ではないですよね
そこで、今回はフォームを使ったデータ送信について勉強したいと思います
QueryStringを使おう
QueryString（ｑｓ）モジュールを使うことで、フォームに入れたメッセージをパース処理することができます
ということで、今回のコードです
const qs = require(‘querystring’);
でｑｓモジュールをロードしています
こちらもインストールは必要ありません
そのまま使えます
フォームを用意しましょう
index.ejsの19～22行目に<form></form>で送信用のフォームを用意しました
こちらには処理方法としてmethod=”post”としてサーバーへPOST（データを送信）するようにしています
サーバー側の処理でPOSTでデータが送られてきたときの処理を定義することにより、GETのときと処理をわけることができるわけです
ちなみにGETはこれまで使ってきた通常の処理です
通常WebサイトにアクセスするときはGETでアクセスをします
POSTはフォームなどを送信するときに使います
イベント処理をしよう
function response_sample(req, res)｛処理｝
ここでフォーム送信がされた時の処理を行っています
if (req.method == ‘POST’) ｛処理｝
ここでPOSTの場合の処理を行います
req.on(‘data’, (data) => {}）
ここでイベント処理をしています
オブジェクト.on (‘イベント名’,処理の関数)という形でイベントを処理します
この場合reqオブジェクトに対してのイベントということですのでreqオブジェクトのイベントがdataの場合の処理を以下の関数で行うよということです
dataイベントはクライアントからデータを受け取るときに発生するイベントとなります
今回フォームでデータを送っていますので、それに反応して処理が行われるわけです
データは分けて送られる
では、dataイベントの処理を見てみましょう
body += data;
あらかじめ用意したbody変数に送られてきたデーターを入力しています
なぜかこのような処理の仕方になるか疑問に思いませんか
Javascriptの場合、元のデータにつけ足すときに
変数名 ＋＝ 付け足すデータ
という書き方をします
最初にvar body＝’’としているので何も変数には入っていない状態です
body = dataでよいのでは？と思いませんでしたか？
実はこれは大事な処理の仕方となっています
インターネットを通じてデータ送信をする場合は一度ですべてのデータが送られてくるわけではありません
何度か分けてデータが送られてくるので、データが送られるたびにその送られてきたデータを付け足しながら変数に入れていき
あとでそれをまとめて表示するという方法をとる必要があります
また、データの送信が終わった後にしょりをしないと途中でレンダリングしても正常に表示がされません
そこで、データが送信されている限りdateイベントで変数にデータを追加し続けるようにしてます
そして、このコードのもう一つのイベント’end’イベントで、まとめたデーターをqs.parse(body)でそのままだと使えないクエリテキストをパース処理して利用できる形にしているわけです
そしてそれをvar content = ejs.render(sample,｛｝)でレンダリングしてhtmlに変換して表示しているわけですね
ということで、今回はqsモジュールを使ってフォームを利用したデータ送信方法を勉強しました
コメント