jQuery.ajaxでRailsのコントローラを叩く

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

ajaxを利用することで、jQuery側からRailsのコントローラへアクセス出来たので備忘録を兼ねて記載しようと思います。

gemの導入

railsでjQueryを扱えるように、gemを導入します。

(デフォルトで入ってる場合もあるみたいです。）

# Gemfile
gem 'jquery-rails'

Controllerの用意

# tests_controller.rb

def index
end

#ユーザの一覧をjson形式で返すアクション
def ajax_test
  @user = User.all
  render json: @user
end

ページ表示用のindexアクションと、ajax通信用のajax_testアクションを定義したControllerを用意します。

対応するルーティングの追加

ajaxでアクセス出来るように、ルーティングを追加します。

# config/routes.rb
Rails.application.routes.draw do
  resources :users
  resources :tests
  get 'ajax_test', to: 'tests#ajax_test'
end

Viewの用意

# index.html.erb

<% content_for :head do %>
  <%= javascript_include_tag 'ajax_test', 'data-turbolinks-track' => true %>
<% end %>

<h1>ajaxテストページ</h1>

<%= link_to 'jsonを表示する', ajax_test_path, {id: "ajax_test", remote: true} %>

<table id="user"></table>

indexアクションでrenderするviewファイルを用意します。

今回は、リンクをクリックしたらajax通信が始まるようにしました。

(remote: trueを追加することで、rails側がajax通信をしてくれるようになります。）

coffeescriptの用意

ajaxでアクセスするためのcoffeescriptを用意します。

リンクをクリックしたら、動作するように指定しました。

また、ajax通信が成功したら、返却されたjson形式のデータをtableタグの内部に追加するようにしています。

# ajax_test.js.coffee

$ ->
  $("#ajax_test").click ->
    $.ajax
      url: '/ajax_test'
      type: 'get'  #get,postの指定
      dataType: 'json' #レスポンスのデータタイプ指定
      async: true #非同期通信フラグ
    .done (response) ->
      #処理が成功した時の処理
      $("#user").append("<tr><th>名前</th><th>年齢</th></tr>")
      for i in [0..response.length]
        $("#user").append("<tr><td>" + response[i].name + "</td><td>" + response[i].age + "</td></tr>")
    .fail (response) ->
      #処理が失敗した時の処理
      alert 'fail'

# 生成されるjavascript

(function() {
  $(function() {
    return $("#ajax_test").click(function() {
      return $.ajax({
        url: '/ajax_test',
        type: 'get',
        dataType: 'json',
        async: true
      }).done(function(response) {
        var i, j, ref, results;
        $("#user").append("<tr><th>名前</th><th>年齢</th></tr>");
        results = [];
        for (i = j = 0, ref = response.length; 0 <= ref ? j <= ref : j >= ref; i = 0 <= ref ? ++j : --j) {
          results.push($("#user").append("<tr><td>" + response[i].name + "</td><td>" + response[i].age + "</td></tr>"));
        }
        return results;
      }).fail(function(response) {
        return alert('fail');
      });
    });
  });

}).call(this);

実際に動作させてみる

railsを起動して、期待通りに動作するか確かめました。



上記の「jsonを表示する」リンクをクリックすることで、無事テーブル内にjsonの中身を表示することが出来ました。

まとめ

jquery側からControllerへ、ajaxを利用すればアクセス出来ることが分かりました。

まだ単純なアクセスと表示でしか利用出来ていないので、もっと他に便利なことが出来ないか模索してみたいと思います。