JSONでAjax

Versions

ruby: 2.2.1 rails: 4.2.1

JSONでAjax

前回エントリはテンプレートでAjaxでした． 今回はRailsではないアプリでお馴染みの方法に近い方法をエントリします．

アンカーをクリックすると，コントローラで作成したJSONを表示します．

config/routes.rb

  ############################
  # ajaxjson (ajax with json)
  ############################
  get "ajaxjson(/:action)" => "ajaxjson"

app/views/ajaxjson/index.html.erb

<% @page_title %>
<h1><%= @page_title %></h1>

<%= link_to("ajaxjson_list", {action: :list}, id: "ajaxjson_list", remote: true) %>

<div id="ajaxjson_list_result"></div>

link_toにidを設定します．これをAjaxのレシーバとするということです（当たり前ですが．

app/controllers/ajaxjson_controller.rb

class AjaxjsonController < ApplicationController

  def index
  end

  def list
    result = []
    5.times do |i|
      result.push({name: "book_#{i + 1}", author: "author_#{i + 1}"})
    end
    render json: result
  end

end

Ajaxはlistアクションが処理します． リターンするJSONオブジェクト（result）を作成しています． render json: result とします． 対応するviewsの erb や js.erb はありません．

assets/javascripts/ajaxjson.js

$(function() {
  // Receiver
  $("#ajaxjson_list")

    .on("ajax:success", function(evt, data, status, xhr) {
      $result = $("#ajaxjson_list_result");
      $result.empty();
      $br = $("<br>");
      data.forEach(function(e) {
        $p = $("<p>").append(`name: ${e.name}, author: ${e.author}`);
        $result.append($p).append($br);
      });
    })
    
    .on("ajax:error", function(evt, xhr, status, error) {
      console.log("Error: " + error);
    })
});

イベント名の"ajax:success", "ajax:error", "ajax:complete"等は，jquery-railsで定義されているようです．

まとめ

良いところとして感じたのは，やはり従来どおりのAjax通信のイメージに近いところです．

良くないところとして感じたのは，JavaScriptが大きくなるところと，アセットパイプラインがつらいところです． アセットパイプラインは，assets/javascriptsフォルダ内にJSファイルを置くのですが，Viewに対するJSが管理できない（すべてのJSをロードするらしい...）のがつらいです（やる方法はあるようですが...）

結論的な・・・

Railsに乗るにはテンプレートを活用するようにした方がよいようです． アセットパイプラインにはユーティリティ関数を乗せる感じでしょうか．