Express を使って、フォームの内容を送信してみます。

まず初めに、ポート 8000 でサーバーを実行できるようにします。

const express = require("express");
const app = express();

app.listen(8000, () => console.log("Server is running ..."));

フォームの内容を送信するために、Express のurlencodedを使用します。

const express = require("express");
const app = express();

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

app.listen(8000, () => console.log("Server is running ..."));

get を使って、フォームを作りましょう。

URL は、『/menu』にします。

const express = require("express");
const app = express();

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

app.get("/menu", (req, res, next) => {
  res.send(
    '<form action="/" method="POST"><input type="text" name="menu"><button type="submit">送信</button></form>'
  );
});

app.listen(8000, () => console.log("Server is running ..."));

http://localhost:8000/menu を確認すると、 image2

フォームが表示されました。

post を使って、ホームにフォームの内容が表示できるようにします。

const express = require("express");
const app = express();

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

app.get("/menu", (req, res, next) => {
  res.send(
    '<form action="/" method="POST"><input type="text" name="menu"><button type="submit">送信</button></form>'
  );
});

app.post("/", (req, res, next) => {
  res.send(req.body);
});

app.listen(8000, () => console.log("Server is running ..."));

実際に、フォームで送信してみると、

http://localhost:8000/menu

image3

http://localhost:8000

image4

カレーライスの値を送信することができました。

ブログ一覧