前回の記事（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に格納される