前の記事
前回はHelloWorldまででした。
今回はGETとPOSTを勉強してきたのでまとめていきます。
GET
index.ejsに、自分自身にGetパラメータで"name"と"age"を渡し、再度読み込まれたときに"name"と"age"を表示するようなイメージで作りにしました。
views\index.ejs
<div>
<a href="?name=TEST&age=17">GETのテスト！！</a>
<p>Name:<%= name %></p>
<p>Age:<%= age %></p>
</div>
サーバサイドのroutes\index.jsの処理です。
router.get関数でGetパラメータの"name"と"age"を受け取り、JSON形式のオブジェクトにセットし、自分自身に返しています。各Getパラメータは"request.query"で取得できます。
routes\index.js
const express = require('express');
const router = express.Router();
// ここを追加
var resObj = {
title: 'Sample NodeExpTest',
message: 'Hello World!',
name: "",
age: "",
sports: ""
};
router.get('/', function (request, response) {
// response.render('index', { title: 'Sample NodeExpTest', message: 'Hello World!' });
// ここを追加
const query = request.query;
resObj.name = query.name;
resObj.age = query.age;
response.render('index', resObj);
});
動作確認
初期表示時
リンククリック後
POST
index.ejsに入力フォームを作成し、自分自身にPOSTすると、サーバサイドでフォームのデータを受け取り、JSON形式のオブジェクトにセットし、自分自身に返しています。各フォームデータは"request.body"で取得できます。
views\index.ejs
<div>
<form action="/" method="POST">
<p>好きなスポーツは何ですか？</p>
<input type="text" name="sports">
<input type="submit" value="POSTのテスト！！"></input>
</form>
<p>好きなスポーツは・・・<%= sports %>です</p>
</div>
routes\index.js
router.post("/", function (request, response) {
resObj.sports = request.body.sports;
response.render('index', resObj);
});
このままでは"request.body"はundefinedとなり、フォームデータを受け取ることができませんでした。server.jsのappの直下に以下のようなおまじないを追加する必要があるようです。
server.js
// express の実態 Application を生成
const app = express();
// POSTのクエリーを良い感じに処理する
app.use(express.urlencoded({extended: true}));
動作確認
初期表示時
好きなスポーツを入力します。
"POSTのテスト！！"ボタンをクリックすると、入力したスポーツが画面に表示されました。
今回はここまで。
次回は画面遷移について勉強していきたいと思います。
ソースコードはこちら。
https://github.com/pocota5260/NodeExpTest
↧