Client側（greet.html）の変更

現状のgreet.htmlは次のようになっている。

greet.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form>
      <table>
        <tr>
          <td>First Name:</td>
          <td><input name="first_name" type="text" value="" /></td>
        </tr>
        <tr>
          <td>Last Name:</td>
          <td><input name="last_name" type="text" value="" /></td>
        </tr>
      </table>
      <div><input id="greet_button" type="submit" value="Greet" /><div/>
    </form>
    <div id="greeting_area"></div>
  </body>
</html>

formタグ中のfirst_name、last_nameの２つのinputタグのデータを、http://localhost:3000/post_nameに対して送信するように、formタグにPOST先の属性を追加。

greet.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <!-- ↓formタグにmethod属性とaction属性を追加する。 -->
    <form method="post" action="post_name">
      <table>
        <tr>
          <td>First Name:</td>
          <td><input name="first_name" type="text" value="" /></td>
        </tr>
        <tr>
          <td>Last Name:</td>
          <td><input name="last_name" type="text" value="" /></td>
        </tr>
      </table>
      <div><input id="greet_button" type="submit" value="Greet" /><div/>
    </form>
    <div id="greeting_area"></div>
  </body>
</html>

Server側（handler.clj）の変更

今度はCompojure用のhanlder.cljを変更。現状は次のようになっている。

handler.clj

(ns greet.handler
  (:require [compojure.core :refer :all]
            [compojure.handler :as handler]
            [compojure.route :as route]))

(defroutes app-routes
  (GET "/" [] "Hello World")
  (route/files "/")
  (route/resources "/")
  (route/not-found "Not Found"))

(def app
  (handler/site app-routes))

これに対し、以下のようにPOST用のルーティングを追加する。

handler.clj

(ns greet.handler
  (:require [compojure.core :refer :all]
            [compojure.handler :as handler]
            [compojure.route :as route]))

(defroutes app-routes
  (GET "/" [] "Hello World")
  ;「(POST ...)」の２行を追加。clojureについての説明はしない。
  ;●POST
  ;    メソッド名を指定。今回はPOSTとなる。
  ;●"/post_name"
  ;    POST先のURL。greet.html/formタグ/action属性の指定と一致するように。
  ;    "http://localhost:3000/post_name"を指定してPOSTされたときに、
  ;    ここで追加されたロジックが実行されることになる。
  ;●[first_name ...]
  ;    POSTされた時のform中にあるinputタグのname属性の値とマップされる。
  ;    これらはinputタグの値が格納されている変数として使用できる。
  (POST "/post_name" [first_name last_name]
    (format "Hello, %s %s" first_name last_name))
  (route/files "/")
  (route/resources "/")
  (route/not-found "Not Found"))

(def app
  (handler/site app-routes))

動作確認

では例によってブラウザからhttp://localhost:3000/greet.htmlにアクセスしてみよう。
ちなみにgreet.htmlを変更しているので、既にgreet.htmlを表示していた場合は一度F5キーとか押して再読み込みさせないと何も起きないので注意。

First NameとLast Nameに値を入力してGreetボタンをクリック。

挨拶の文がプレーンテキストのページとして返却された。

いいんじゃないでしょうか？

では次はjQueryのajax関数を使って画面遷移のないPOSTを実行してみよう。

CompojureとjQueryでWebアプリを作る No.3（POSTを実装）

Client側（greet.html）の変更

Server側（handler.clj）の変更

動作確認