1. ホーム
  2. javascript

Express(Node.js)でフォームから渡されたデータを取得する方法

2023-09-04 01:26:08

質問

あるページからフォームで渡されたデータを取得し、そのデータをリダイレクト先のページで使用したいのですが、どうすればよいでしょうか?

クライアント側にはこんなフォームがあります。

<form action="game" method="get">
    <input type="text" name="name"/>
    <input type="submit" />
</form>

で、私のサーバーにはこのスクリプトがあります。

app.get('/game',function(req,res){
    res.sendfile(__dirname + '/game.html'); 
});

どのように解決するのですか?

使用方法 bodyParser.urlencoded( ) ミドルウェアを使用します。

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

すると、req.bodyにフォームの値が入ることになります。

app.post('/game', function (req, res) {
    res.render('the_template', { name: req.body.name });
});

設定 { extended: true } を設定すると、 bodyParser はネストされたオブジェクトを含むフォームデータ内の json のようなデータを受け入れることができます。 { person: { name: Adam } } などは、従来の HTML フォームが送信する名前と値のペアではなく、javascript を使って送信されます。もし、そのようなことが必要なければ、拡張値をfalseに設定することができます。拡張オプションを定義しない (つまり、デフォルトの設定を使用する) ことは明らかに非推奨で、ネストされたオプションとプレーンなネーム バリュー ペアのどちらが必要かを判断するよう求めているようです。

expressサーバーで、あるルートはフォームデータ、あるルートはjsonデータをパースできるようにしたい場合、使えます。

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: <true|false> }))

urlencoded() x-www-form-urlencoded コンテントタイプの場合。

  • true - ネストされたデータ構造用
  • false - 名前と値のペアのための

json() - application/json コンテントタイプの場合

form/multipart は、(multer のような) 別のボディパーサーを必要とすることに注意してください。

更新:Body-ParserがDeprecatedであるというExpressJSエラーが発生した場合の修正。

置き換え

app.use(bodyparser.json()); //utilizes the body-parser package
app.use(bodyParser.urlencoded({extended: true}));

app.use(express.json()); // Used to parse JSON bodies
app.use(express.urlencoded()); //Parse URL-encoded bodies