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

次は、

1. Client側からデータをPOST。
2. そのデータをServer側で受け取り、編集したデータを返却。

というのを実装してみる。

# Client側（greet.html）の変更

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

```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](http://localhost:3000/post_name)に対して送信するように、`form`タグにPOST先の属性を追加。

```html: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を変更。現状は次のようになっている。

```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用のルーティングを追加する。

```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")
  ;「(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](http://localhost:3000/greet.html)にアクセスしてみよう。
ちなみにgreet.htmlを変更しているので、既にgreet.htmlを表示していた場合は一度`F5`キーとか押して再読み込みさせないと何も起きないので注意。

![ブラウザでgreet.htmlを表示](https://qiita-image-store.s3.amazonaws.com/0/39876/078c4b11-0d14-633f-155d-0e23c29fef74.png)

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

![First NameとLast Nameに値を入力してGreetボタンをクリック](https://qiita-image-store.s3.amazonaws.com/0/39876/16bdcdbd-1c25-940f-38a3-b2df01f3f3bb.png)

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

![挨拶の文がプレーンテキストのページとして返却](https://qiita-image-store.s3.amazonaws.com/0/39876/a0b22a21-8b43-284f-fc6c-7171adc67ecb.png)

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

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