javascript - POSTフォームフィールドにアクセスする方法

Question

これが私の簡単なフォームです：

<form id="loginformA" action="userlogin" method="post">
    <div>
        <label for="email">Email: </label>
        <input type="text" id="email" name="email"></input>
    </div>
<input type="submit" value="Submit"></input>
</form>

これが私のExpress.js /Node.jsコードです：

app.post('/userlogin', function(sReq, sRes){    
    var email = sReq.query.email.;   
}

sReq.query.emailまたはsReq.query['email']またはなどを試しsReq.params['email']ました。どれも機能しません。それらはすべて戻りundefinedます。

Get呼び出しに変更すると、機能するので、何か考えはありますか？

score 1348 · Accepted Answer

Express 4.16.0以降、状況が再び変更され、Express3.0と同じように使用できるようになりました。express.json()express.urlencoded()

これは、 Express4.0から4.15までは異なります。

$ npm install --save body-parser

その後：

var bodyParser = require('body-parser')
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

残りはExpress3.0のようです：

まず、本文の投稿データを解析するためにミドルウェアを追加する必要があります。

次のコード行の一方または両方を追加します。

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

次に、ハンドラーでreq.bodyオブジェクトを使用します。

// assuming POST: name=foo&color=red            <-- URL encoding
//
// or       POST: {"name":"foo","color":"red"}  <-- JSON encoding

app.post('/test-page', function(req, res) {
    var name = req.body.name,
        color = req.body.color;
    // ...
});

express.bodyParser()の使用は推奨されないことに注意してください。

app.use(express.bodyParser());

...と同等です：

app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart());

にはセキュリティ上の懸念がexpress.multipart()あるため、必要な特定のエンコーディングタイプのサポートを明示的に追加することをお勧めします。マルチパートエンコーディングが必要な場合（たとえば、ファイルのアップロードをサポートするため）、これを読む必要があります。

score 101 · Accepted Answer

express.bodyParser（）を使用したセキュリティ上の懸念

他のすべての回答は現在express.bodyParser()ミドルウェアの使用を推奨していますが、これは実際には、、、およびミドルウェアのラッパーexpress.json()ですexpress.urlencoded()（express.multipart()http://expressjs.com/api.html#bodyParser ）。フォームリクエストボディの解析はミドルウェアによって行われ、フォームデータをオブジェクトexpress.urlencoded()に公開するために必要なのはこれだけです。req.body

アップロードされたすべてのファイルの一時ファイルを/作成する方法に関するセキュリティ上の懸念から（ガベージコレクションされない）、ラッパーを使用せず、代わりに必要なミドルウェアのみを使用することをお勧めします。express.multipart()connect.multipart()express.bodyParser()

注：Connect 3.0（Expressが拡張）がリリースされたときにconnect.bodyParser()のみ含まれるように、まもなく更新されます。urlencodedjson

つまり、代わりに...

app.use(express.bodyParser());

...使用する必要があります

app.use(express.urlencoded());
app.use(express.json());      // if needed

マルチパートフォーム（ファイルのアップロード）を処理する必要がある場合は、サードパーティのライブラリまたはマルチパーティ、バスボーイ、ダイサーなどのミドルウェアを使用します。

score 87 · Accepted Answer

注：この回答はExpress2用です。Express3についてはこちらをご覧ください。

connect / expressを使用している場合は、bodyParserミドルウェアを使用する必要があります。Expressjsガイドで説明されています。

// example using express.js:
var express = require('express')
  , app = express.createServer();
app.use(express.bodyParser());
app.post('/', function(req, res){
  var email = req.param('email', null);  // second parameter is default
});

元の接続専用バージョンは次のとおりです。

// example using just connect
var connect = require('connect');
var url = require('url');
var qs = require('qs');
var server = connect(
  connect.bodyParser(),
  connect.router(function(app) {
    app.post('/userlogin', function(req, res) {
      // the bodyParser puts the parsed request in req.body.
      var parsedUrl = qs.parse(url.parse(req.url).query);
      var email = parsedUrl.email || req.body.email;;
    });
  })
);

クエリ文字列と本文はどちらも、低レベルのライブラリではなく、Railsスタイルのパラメータ処理（qs）を使用して解析されます。繰り返されるパラメーターを。で解析するには、パラメーターに角かっこが必要です。また、ネストされたマップもサポートしています。HTMLフォーム送信の解析に加えて、bodyParserはJSONリクエストを自動的に解析できます。querystringqsname[]=val1&name[]=val2

編集：express.jsを読み、Expressのユーザーにとってより自然になるように回答を変更しました。

score 38 · Accepted Answer

これは、ミドルウェアなしで投稿されたクエリを作成する場合に実行されます。

app.post("/register/",function(req,res){
    var bodyStr = '';
    req.on("data",function(chunk){
        bodyStr += chunk.toString();
    });
    req.on("end",function(){
        res.send(bodyStr);
    });

});

これはブラウザに送信されます

email=emailval&password1=pass1val&password2=pass2val

ただし、ミドルウェアを使用する方がおそらく良いでしょう。そうすれば、各ルートでこれを何度も書く必要がなくなります。

score 27 · Accepted Answer

Express 4ユーザーへの注意：

アプリに入れようとapp.use(express.bodyParser());すると、Expressサーバーを起動しようとしたときに次のエラーが発生します。

エラー：ほとんどのミドルウェア（bodyParserなど）はExpressにバンドルされていないため、個別にインストールする必要があります。https://github.com/senchalabs/connect#middlewareを参照してください。

npmbody-parserとは別にパッケージをインストールしてから、次のようなものを使用する必要があります（GitHubページからの例）。

var express    = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser());

app.use(function (req, res, next) {
  console.log(req.body) // populated!
  next();
})

score 21 · Accepted Answer

何らかの形が与えられた：

<form action='/somepath' method='post'>
   <input type='text' name='name'></input>
</form>

Expressを使用する

app.post('/somepath', function(req, res) {

    console.log(JSON.stringify(req.body));

    console.log('req.body.name', req.body['name']);
});

出力：

{"name":"x","description":"x"}
req.param.name x

score 20 · Accepted Answer

バックエンド：

import express from 'express';
import bodyParser from 'body-parser';

const app = express();
app.use(bodyParser.json()); // add a middleware (so that express can parse request.body's json)

app.post('/api/courses', (request, response) => {
  response.json(request.body);
});

フロントエンド：

fetch("/api/courses", {
  method: 'POST',
  body: JSON.stringify({ hi: 'hello' }), // convert Js object to a string
  headers: new Headers({ "Content-Type": "application/json" }) // add headers
});

score 16 · Accepted Answer

app.use(express.bodyParser());

次に、app.postリクエストに対して、を介して投稿値を取得できますreq.body.{post request variable}。

score 15 · Accepted Answer

Express4.4.1のアップデート

次のミドルウェアはExpressから削除されます。

bodyParser
json
urlencoded
マルチパート

Express3.0で行ったようにミドルウェアを直接使用する場合。次のエラーが発生します。

Error: Most middleware (like urlencoded) is no longer bundled with Express and 
must be installed separately.

これらのミドルウェアを利用するには、ミドルウェアごとに個別にnpmを実行する必要があります。

bodyParserは非推奨としてマークされているため、json、urlencode、および手ごわいconnect-multipartyのようなマルチパートパーサーを使用する次の方法をお勧めします。（マルチパートミドルウェアも非推奨です）。

また、urlencode + jsonを定義するだけで、フォームデータは解析されず、req.bodyは未定義になることを忘れないでください。マルチパートリクエストを処理するミドルウェアを定義する必要があります。

var urlencode = require('urlencode');
var json = require('json-middleware');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

app.use(json);
app.use(urlencode);
app.use('/url/that/accepts/form-data', multipartMiddleware);

score 9 · Accepted Answer

私はこの正確な問題を探していました。上記のすべてのアドバイスに従っていましたが、req.bodyはまだ空のオブジェクト{}を返していました。私の場合、それはhtmlが正しくないのと同じくらい単純なものでした。

フォームのhtmlでは、'name'入力タグで属性だけでなく、属性を使用していることを確認してください'id'。それ以外の場合、何も解析されません。

<input id='foo' type='text' value='1'/>             // req = {}
<input id='foo' type='text' name='foo' value='1' /> // req = {foo:1}

私のばか間違いはあなたの利益です。

score 8 · Accepted Answer

Express4.1以降の場合

ほとんどの回答はExpress、bodyParser、connectに使用されています。multipartは非推奨です。ポストマルチパートオブジェクトを簡単に送信する安全な方法があります。

Multerは、connect.multipart（）の代わりに使用できます。

パッケージをインストールするには

$ npm install multer

アプリにロードします。

var multer = require('multer');

次に、それを他のフォーム解析ミドルウェアと一緒にミドルウェアスタックに追加します。

app.use(express.json());
app.use(express.urlencoded());
app.use(multer({ dest: './uploads/' }));

connect.json（）はapplication/jsonを処理します

connect.urlencoded（）はapplication/x-www-form-urlencodedを処理します

multer（）はmultipart/form-dataを処理します

score 8 · Accepted Answer

アップデート

現在Express version 4.16+、独自のボディパーサー実装がデフォルトのExpressパッケージに含まれているため、別の依存関係をダウンロードする必要はありません。

次のような行をコードに追加した可能性があります。

app.use(bodyparser.json()); //utilizes the body-parser package

Express 4.16以降を使用している場合は、その行を次のように置き換えることができます。

app.use(express.json()); //Used to parse JSON bodies

express.json（）のコードはbodyparser.json（）に基づいているため、これによってアプリケーションに重大な変更が加えられることはありません。

環境に次のコードもある場合：

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

これを次のように置き換えることができます。

app.use(express.urlencoded()); //Parse URL-encoded bodies

注意の最後の注意：まだ必要な場合がある非常に特殊なケースがまだいくつかありますがbody-parser、ほとんどの場合Express、ボディパーサーの実装はほとんどのユースケースに必要なすべてです。

（詳細については、expressjs / bodyparserのドキュメントを参照してください）。

score 7 · Accepted Answer

app.use（express.bodyParser（））は使用しないでください。BodyParserは、json + urlencoded+mulitpartの結合です。マルチパートはconnect3.0で削除されるため、これは使用しないでください。

これを解決するには、次のようにします。

app.use(express.json());
app.use(express.urlencoded());

app.use（app.router）はjsonの後に使用し、urlencodedする必要があることを知っておくことが非常に重要です。そうしないと、機能しません。

score 6 · Accepted Answer

Express v4.17.0

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

app.post('/userlogin', (req, res) => {    

   console.log(req.body) // object

   var email = req.body.email;

}

デモフォーム

関連する別の回答

score 5 · Accepted Answer

リクエストストリーミングは私のために働いた

req.on('end', function() {
    var paramstring = postdata.split("&");
});

var postdata = "";
req.on('data', function(postdataChunk){
    postdata += postdataChunk;
});

score 5 · Accepted Answer

Expressバージョン4.16で書かれています

ルーター関数内では、req.bodyプロパティを使用してpost変数にアクセスできます。たとえば、これがPOSTフォームのルートである場合、入力した内容が返されます。

function(req,res){
      res.send(req.body);

      //req.body.email would correspond with the HTML <input name="email"/>
}

PHPに精通している人のためのPS：$_GET私たちが使用するPHPの変数にアクセスし、Node.jsで使用するreq.queryPHPの変数にアクセスするために。$_POSTreq.body

score 4 · Accepted Answer

POSTリクエストとGETリクエストの両方に次のコードを使用することで、すべてのパラメータを見つけることができました。

var express = require('express');
var app = express();
const util = require('util');
app.post('/', function (req, res) {
    console.log("Got a POST request for the homepage");
    res.send(util.inspect(req.query,false,null));
})

score 1 · Accepted Answer

投稿パラメータは次のように取得できます。

app.post('/api/v1/test',Testfunction);
http.createServer(app).listen(port, function(){
    console.log("Express server listening on port " + port)
});

function Testfunction(request,response,next) {
   console.log(request.param("val1"));
   response.send('HI');
}

score 1 · Accepted Answer

var express        =         require("express");
var bodyParser     =         require("body-parser");
var app            =         express();

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

app.get('/',function(req,res){
  res.sendfile("index.html");
});
app.post('/login',function(req,res){
  var user_name=req.body.user;
  var password=req.body.password;
  console.log("User name = "+user_name+", password is "+password);
  res.end("yes");
});
app.listen(3000,function(){
  console.log("Started on PORT 3000");
})

score 0 · Accepted Answer

express-fileuploadパッケージを使用します。

var app = require('express')();
var http = require('http').Server(app);
const fileUpload = require('express-fileupload')

app.use(fileUpload());

app.post('/', function(req, res) {
  var email = req.body.email;
  res.send('<h1>Email :</h1> '+email);
});

http.listen(3000, function(){
  console.log('Running Port:3000');
});

score 0 · Accepted Answer

req.query.post間違った方法で使用している場合req.query.postはmethod=get、でmethod=post動作し、body-parserで動作します。

投稿を変更してこれを試してください：

<form id="loginformA" action="userlogin" method="get">
<div>
    <label for="email">Email: </label>
    <input type="text" id="email" name="email"></input>
</div>
<input type="submit" value="Submit"></input>  
</form>

エクスプレスコードでは「app.get」を使用します

score 0 · Accepted Answer

公式ドキュメントバージョン4から

const express = require('express')
const app = express()
app.use(express.json());
app.use(express.urlencoded({ extended: true })) 

app.post('/push/send', (request, response) => {
  console.log(request.body)
})

score -1 · Accepted Answer

HTMLフォームでPOSTメソッドを使用している場合は、サーバー側のreq.body、つまりNode.jsからデータを取得する必要があります。また、追加します

var bodyParser = require('body-parser')
app.use( bodyParser.json() );    
app.use(bodyParser.urlencoded({extended: false}));

また

HTMLでmethod='GET'を使用し、サーバー側、つまりNode.jsでreq.queryによってデータをキャッチします。

javascript - POSTフォームフィールドにアクセスする方法

23 に答える 23

Express4.4.1のアップデート

Express4.1以降の場合

Related

Reference