Expressによるリクエスト処理の基本 (2/4)
作成:2013-05-21 08:22
更新:2015-08-13 13:50
更新:2015-08-13 13:50
■フォームの送信について
クライアントからの情報送信の基本は、やはり「フォーム」でしょう。フォームから送信される処理もExpressでは非常に簡単に行えます。これは以下の２つのポイントにまとめられるでしょう。
・POST送信はrouter.postで登録
Expressでは、公開されるアドレスと、そこにアクセスした時の処理を登録するようになっていました。今まで、routes内に用意するスクリプトでは「router.get」を使ってこの登録作業を行って来ました。が、POST送信先のアドレスは、router.postを使う必要があります。
このように呼び出すことで、指定のアドレスにPOSTでアクセスできるようになります。基本的に、router.getをrouter.postに書きかるだけで使い方は同じなのですぐにわかりますね。
・送信フォームの値はbodyから取得する
送信されたフォームの値は、Request内の「body」というプロパティにまとめられています。これは以下のように利用します。
取り出す名前は、フォームの入力用タグのname属性に記述した名前を指定します。では、これも実際に簡単なサンプルを作ってみましょう。
下のリスト欄に必要なスクリプトをまとめておきました。今回も/helo関係のファイルを書き換えて作成します。修正したら、Node.jsを起動し、/heloにアクセスしてみましょう。入力フィールドが１つだけあるフォームが表示されます。
適当に何か書いて送信すると、送ったテキストがフォームの上に表示されます。またフィールドに書いたテキストもそのまま保持されているのがわかります。
送信するフォームには、<form method="post" action="/helo">と記述してあります。つまり、/heloでは、GETとPOSTの両方の対応が必要になります。routes/helo.jsを見ると、router.getとrouter.postの両方が用意されていることがわかるでしょう。
フォームを付け取り処理しているのrouter.post部分では、このようにして送られた値を取り出しています。
これで、<input type="text" name="input1">タグのvalueを変数に取り出すことができます。後は、それを使った処理を実行するだけです。わかってしまえばとても単純ですね！
・POST送信はrouter.postで登録
Expressでは、公開されるアドレスと、そこにアクセスした時の処理を登録するようになっていました。今まで、routes内に用意するスクリプトでは「router.get」を使ってこの登録作業を行って来ました。が、POST送信先のアドレスは、router.postを使う必要があります。
《Router》.post( アドレス , 呼び出す関数 );
このように呼び出すことで、指定のアドレスにPOSTでアクセスできるようになります。基本的に、router.getをrouter.postに書きかるだけで使い方は同じなのですぐにわかりますね。
・送信フォームの値はbodyから取得する
送信されたフォームの値は、Request内の「body」というプロパティにまとめられています。これは以下のように利用します。
var 変数 = 《Request》.body[ 取り出す名前 ];
取り出す名前は、フォームの入力用タグのname属性に記述した名前を指定します。では、これも実際に簡単なサンプルを作ってみましょう。
下のリスト欄に必要なスクリプトをまとめておきました。今回も/helo関係のファイルを書き換えて作成します。修正したら、Node.jsを起動し、/heloにアクセスしてみましょう。入力フィールドが１つだけあるフォームが表示されます。
適当に何か書いて送信すると、送ったテキストがフォームの上に表示されます。またフィールドに書いたテキストもそのまま保持されているのがわかります。
送信するフォームには、<form method="post" action="/helo">と記述してあります。つまり、/heloでは、GETとPOSTの両方の対応が必要になります。routes/helo.jsを見ると、router.getとrouter.postの両方が用意されていることがわかるでしょう。
フォームを付け取り処理しているのrouter.post部分では、このようにして送られた値を取り出しています。
var str = req.body['input1'];
これで、<input type="text" name="input1">タグのvalueを変数に取り出すことができます。後は、それを使った処理を実行するだけです。わかってしまえばとても単純ですね！
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※helo.ejs
<body>
<h1><%= title %></h1>
<%= msg %>
<form method="post" action="/form">
<input type="text" name="input1"
value="<%= input %>">
<input type="submit">
</form>
</body>
※helo.js
var express = require('express');
var router = express.Router();
/* GET helo page. */
router.get('/', function(req, res, next) {
var p1 = req.query["p1"];
var p2 = req.query.p2;
var msg = p1 == undefined ? "" : p1 + "," + p2;
res.render('helo',
{
title: 'HELO Page',
msg: msg,
input: ''
}
);
});
/* POST helo page. */
router.post('/', function(req, res, next) {
var str = req.body['input1'];
res.render('helo',
{
title: 'HELO Page',
msg: "you typed: " + str,
input: str
}
);
});
module.exports = router;
※関連コンテンツ