前回の記事（Webrickを使って静的なhtmlを返す）の続き
前回作ったページ
投稿フォーム
対応するhtml(一部)
<h2>GETで送る</h2>
<ul>
<form action="/form_get" method="get">
<li><label for="user_name">ユーザー名</label>
<input type="text" name="user_name"></li>
<li><label for="age">年齢</label>
<input type="text" name="age"></li>
<button type="submit">投稿</button>
</form>
</ul>
<h2>POSTで送る</h2>
<ul>
<form action="/form_post" method="post">
<li><label for="user_name">ユーザー名</label>
<input type="text" name="user_name"></li>
<li><label for="age">年齢</label>
<input type="text" name="age"></li>
<button type="submit">投稿</button>
</form>
</ul>
今回は、ユーザーが入力した情報に合わせた動的なページを作成する
webrick.rbに追記
webrick.rb
require 'webrick'
server = WEBrick::HTTPServer.new({
:DocumentRoot => './',
:BindAddress => '127.0.0.1',
:Port => 8000
})
# 以下追記
server.mount_proc("/form_get") do |req, res|
# レスポンス内容を出力
x = req.query
body =
"<html><body><head><meta charset='utf-8'></head><p>クエリパラメータは#{x}です</p></br>
<p>こんにちは#{x["user_name"]}さん。あなたの年齢は#{x["age"]}ですね</p></body></html>"
res.status = 200
res['Content-Type'] = 'text/html'
res.body = body
end
server.mount_proc("/form_post") do |req, res|
# レスポンス内容を出力
x = req.query
body =
"<html><body><head><meta charset='utf-8'></head><p>フォームデータは#{x}です</p></br>
<p>こんにちは#{x["user_name"]}さん。あなたの年齢は#{x["age"]}ですね</p></body></html>"
res.status = 200
res['Content-Type'] = 'text/html'
res.body = body
end
server.start
解説
※ 追記部分の上段がGETリクエストを受けた場合の処理で下段がPOSTリクエストの処理
※ reqに入るのはWEBrick::HTTPRequest オブジェクトであるため、WEBrick::HTTPRequest クラスのインスタンスメソッドであるqueryメソッドがreqに対して使える。
※ queryメソッドは、リクエストのクエリーまたはクライアントがフォームへ入力した値をハッシュにして返すメソッド。
つまり、フォームのユーザー名の欄に「太郎」、年齢の欄に「25」と入力した場合、req.queryの返り値は{ "user_name" => "太郎", "age" => "25" }となる
（参考：instance method WEBrick::HTTPServer#mount_proc）
入力情報をGETで送った場合とPOSTで送った場合の違い
GETリクエストの場合
フォームのユーザー名の欄に「太郎」、年齢の欄に「25」と入力し、『投稿』を押すと、/form_get?user_name=太郎&age=25に対してGET リクエストを送れる。
これを受けたサーバーは「太郎」「25」に対応したhtml、すなわち『こんにちは太郎さん。あなたの年齢は25ですね』というページを返してくれる。
ユーザーの入力に応じて無限に変化可能なページを返せるので、まさに__動的なページ__である
POSTリクエストの場合
フォームのユーザー名の欄に「太郎」、年齢の欄に「25」と入力し、『投稿』を押すと、/form_postに対してPOSTリクエストを送れる。
これを受けたサーバーは「太郎」「25」に対応したhtml、すなわち『こんにちは太郎さん。あなたの年齢は25ですね』というページを返してくれる。
もちろんこちらもユーザーの入力に応じて無限に変化可能なページを返せるので、動的なページが実現している
GETとPOSTの違い
ユーザーがフォームに情報を入力した場合、GETの場合は/form_get?user_name=太郎&age=25というクエリパラメーターが発行されるのに対して、POSTの場合は発行されない。その代わりにPOSTでは、ユーザーが入力した情報はリクエストbodyのForm Dateに格納される