パラメータ

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

クエリパラメータとは、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="ja">
<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;

  ... 略 ...
});

オブジェクト形式でデータ送信

内部で body-parser（現在は express.urlencoded などに統合済み）を利用してリクエストボディを解釈します。URL エンコードされたデータのパース処理には qs ライブラリが使われています。

express.urlencoded({ extended: true })を使用すると、フォーム送信のデコードは qs に依存しています。

express.urlencoded({ extended: false })を使用すると、Node.js 標準の querystring モジュールで処理されるため、ネストには対応せずフラットなオブジェクトになります。

以下はexpress.urlencoded({ extended: true })に設定をした場合です。

<form action="/post/" method="POST">
  <p>First:<input type="text" name="txt[first][txt]"></p>
  <p>Second:<input type="text" name="txt[second][txt]"></p>
  
  <button  type="submit">送信</button>
</form>

上記のようなフォームがあった場合、データは以下のようなオブジェクト形式で送信されます。

{ txt: { first: { txt: 'sample1' }, second: { txt: 'sample2' } } }

name="txt[1][txt]の最初の [] に数字を指定するとインデックスになり配列で送信されるようになります。

<form action="/post/" method="POST">
  <p>First:<input type="text" name="data[1][txt]"></p>
  <p>Second:<input type="text" name="data[2][txt]"></p>
  
  <button  type="submit">送信</button>
</form>

{ data: [ { txt: 'sample1' }, { txt: 'sample2' } ] }

データベースに登録するには、次のようにします。データベースは以下の SQL で作成します。

CREATE TABLE users_texts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50),
  text_value VARCHAR(255)
);

フォームは以下のようにします。

<form action="/post/" method="POST">
  <p>User1:<input type="text" name="data[user1][txt]"></p>
  <p>User2:<input type="text" name="data[user2][txt]"></p>
  
  <button  type="submit">送信</button>
</form>

req.bodyで送信されるデータは、以下のようになります。

{ data: { user1: { txt: 'sample1' }, user2: { txt: 'sample2' } } }

Express.js のルータを以下のようにします。

router.post('/post', (req, res) => {
  const rows = [];
  for (const username in req.body.data) {
rows.push([username, req.body.data[username].txt]);
  }

  // rows = [
  //   ['user1', 'AAA'],
  //   ['user2', 'BBB']
  // ]
  
  const sql = 'INSERT INTO users_texts (username, text_value) VALUES ?';
  connection.query(sql, [rows], (err, result) => {
if (err) throw err;
console.log("挿入完了", result.affectedRows);
res.send("OK");
  });
});

affectedRowsは、result の中に含まれるプロパティで、INSERT/UPDATE/DELETE の件数を返します。