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
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] Node.jsで終了する方法
-
[解決済み] Node.jsアプリケーションをデバッグするにはどうすればよいですか?
-
[解決済み] Node.jsを完全にアンインストールして、最初から再インストールする方法 (Mac OS X)
-
[解決済み] Node.js上のExpress.jsでGET(クエリ文字列)変数を取得する方法とは?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] BlobからArrayBufferへ移行する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]