Phoenixにajax-requestを投げる

Goal

Phoenixにajaxリクエストを投げる。

Dev-Environment

OS: Windows8.1
Erlang: Eshell V7.1, OTP-Version 18.1
Elixir: v1.1.1
Phoenix Framework: v1.0.3
PostgreSQL: postgres (PostgreSQL) 9.4.4

Text

色々と検証をしていたら、
ajaxにリクエストを投げることもやったので忘れないように簡単にまとめる。
(jQueryが必要なので、アプリケーションに読み込みをしておいて下さい)

getとpostリクエストを投げてみます。
まずは、getからやっていきます。

newとcreateのルーティングを追加。

Example:

scope "/", Sample do
  pipe_through :browser # Use the default browser stack

  get "/", PageController, :index
  resources "/events", PageController, only: [:new, :create]
end

デフォルトのPageコントローラにアクションを追加。

Example:

defmodule Sample.PageController do
  use Sample.Web, :controller

  ...

  def new(conn, _params) do
    render conn, "new.html"
  end

  def create(conn, _params) do
    render conn, "new.html"
  end
end

newテンプレートは適当に作る。中身のない空でも良い。

Example:

<h1>New!</h1>

index.html.eexに以下の内容を追加する。

Example:

<script language="JavaScript">
function sample() {
  $.ajax({
    url: "<%= page_path(@conn, :new) %>",
    type: "get",
    data: {event: {value1: "hoge", value2: "huge"}},
    success: function (data) {
      console.log(data);
      alert("success:" + data);
    },
    error: function (error) {
      console.log(error);
      alert("error:" + error);
    }
  });
};
</script>

<a href="#" onClick="sample(); return false;">ajax request</a>

• url: リクエストを投げるパス
• type: HTTPメソッド
• data: 送信するパラメータ
• success: 成功時の処理
• error: 失敗時の処理

dataは投げなくてもいいんですが、一応パラメータとして送れるのか確認のため設定しています。

Result:

aタグのリンクをクリックすると、newアクションが動作をしてHTMLを返します。
alertで出力していますので、HTMLが返ってくることを確認できると思います。

これは、Phoenix側でHTMLを返すようにしているためです。
JSONのAPIサーバとして実装していれば、JSONが返ってくると思います。

サーバ側のログを見てみると…

[info] GET /events/new
[debug] Processing by Sample.PageController.new/2
  Parameters: %{"event" => %{"value1" => "hoge", "value2" => "huge"}}
  Pipelines: [:browser]

newアクションが呼び出され、パラメータの値も確認できますね。
データ形式的にはJSONっぽく投げていましたが、Elixirのマップに変換されているようです。
おかげ様で、アクションの引数にてパターンマッチで取得できますね。

次は、postを投げてみます。

index.html.eexに以下の内容に変更する。

Example:

<script language="JavaScript">
function sample() {
  $.ajax({
    url: "<%= page_path(@conn, :create) %>",
    type: "post",
    data: {event: {value1: "hoge", value2: "huge"}},
    headers: {
      "X-CSRF-TOKEN": document.querySelector("meta[name=csrf]").content
    },
    success: function (data) {
      console.log(data);
      alert("success:" + data);
    },
    error: function (error) {
      console.log(error);
      alert("error:" + error);
    }
  });
};
</script>

<meta name="csrf" content="<%= Plug.CSRFProtection.get_csrf_token() %>">
<a href="#" onClick="sample(); return false;">ajax request</a>

csrfトークンの追加とpathとtypeを変更しただけです。
postを投げる場合は、csrfトークンも一緒に投げてあげると良いかと思います。
(対策的に考えて。)

Result

[info] POST /events
[debug] Processing by Sample.PageController.create/2
  Parameters: %{"event" => %{"value1" => "hoge", "value2" => "huge"}}
  Pipelines: [:browser]

ちゃんと、createアクションが呼び出されていますね。

簡単なまとめなので以上。
分からないことがあれば、コメントにでも書いて頂ければ対応します。

Bibliography

なし

​