body-parser でフォームからの POST データを受け取る方法

ここでは Express 環境で　HTML フォームからポストされたデータをパースするのに便利な body-parser の使い方を実例を挙げて説明します。

HTTP の POST とはなんぞや、とか、そういったことについては「body-parser で JSON 形式の HTTP リクエストを受け取る方法」で簡単に補足説明してますので、興味のある人はそちらをみてください。

さっそくフォームデータを受け取る方法について、具体的に試してみましょう。

Express の環境で HTML フォームからの POST データを受け取るには、urlencoded ミドルウェアをセットします。

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({
  extended: true
}));

app.post('/test', (req, res) => {
  console.log(req.body);
  res.status(200).json({
    message: 'Hello!',
    address: `${req.body.city}, ${req.body.state}`
  });
});

app.use(express.static(__dirname + '/statics'));
app.listen(3000, () => console.log('Listening on port 3000...'));

フォームの HTML は次の通りとしました。何の変哲も無い普通のフォームです。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Form Test1</title>
    <style>
      body { font-family: sans-serif; }
      input { padding: 5px; font-size: 1rem; }
      button { padding: 5px; width: 70px; font-size: 1rem; }
    </style>
  </head>
  <body>
    <form action='/test' method='POST'>
      <table>
        <tr>
          <td>State:</td>
          <td><input type='text' name='state' value=''></td>
        </tr>
        <tr>
          <td>City:</td>
          <td><input type='text' name='city' value=''></td>
        </tr>
        <tr>
          <td></td>
          <td><button type='submit'>OK</button></td>
        </tr>
      </table>
    </form>
  </body>
</html>

このフォームから /test 向けに POST リクエストを送信します。

確かにコンソールに次のように出力され、

$ node index.js
Listening on port 3000...
{ state: 'California', city: 'Los Angeles' }

ブラウザにもレスポンスが返されることが確認できます。

以上、Express 環境で HTML フォームを用いて body-parser の利用例を紹介しました。

body-parser で フォームからの POST データを受け取る方法

body-parser でフォームからの POST データを受け取る方法