WEBrick을 사용하여 동적 html을 반환합니다 (~ GET과 POST의 차이 ~)

9365 단어 HTML루비
마지막 기사 ( 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에 저장됩니다.
WEBrick을 사용하여 정적 HTML을 반환
PHP없이 문의 양식 작성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage