パラメータとフォームの送信 - Express

パラメータ

サーバーにデータを送信する方法にクエリパラメータがあります。

クエリパラメータとは、URLに含まれるキーと値のペアのことで、「 http://localhost:3000/form?name=jon&&age=20 」の 「 ? 」より後の部分に当たります。

クエリパラメータを送信する

アプリケーションを「 Express Generator 」で作成し、以下のファイルを追加します。

ブラウザを開きアドレスバーに「 http://localhost:3000/form?name=jon&&age=20 」と入力してください。

クエリーパラメータの値が表示されていれば、成功です。

app.js

var formRouter = require('./routes/form');
app.use('/form', formRouter);

views/form.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%- title %></title>
</head>
<body>
  <p><%- content %></p>
</body>
</html>

routes/form.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  let name = req.query.name;
  let age = req.query.age;

  let data = {
    title: 'Hello',
    content: '私は' + name + 'です。年齢は' + age + 'です。'
  };
  res.render('form', data);
});

module.exports = router;

POSTでフォームのデータを送信する

form.ejs と form.js のファイルを以下のように変更します。

views/form.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%- title %></title>
</head>
<body>
  <p><%- content %></p>
  <form action="/form/post" method="post">
    <input type="text" name="message">
    <input type="submit" value="送信">
  </form>
</body>
</html>

routes/form.js

var express = require('express');
var router = express.Router();

router.get('/', (req, res, next) => {
  let data = {
    title: 'Hello',
    content: '送信してください。'
  };
  res.render('form', data);
});

router.post('/post', (req, res, next) => {
  let msg = req.body['message'];
  let data = {
    title: 'Hello',
    content: '送信されたデータ：' + msg
  };
  res.render('form', data);
})

module.exports = router;

パスパラメータの取得

パスパラメータ(:id)の値を取得するには、以下のようにします。

router.post('/delete/:id', (req, res, next) => {
  let id = req.params.id;

  ... 略 ...
});