とにかく簡単にRailsでAjaxしたい

はじめに

RailsにはRailsのAjaxのやりかたがありますが、なんか面倒だしjQueryで汎用的に簡単にやりたい、という人向け。
似たような記事はいくつもあると思いますが、もっとシンプルな記事を書きたいと思いました。

背景

前回と同じ。
多くの場合と同じく、画面操作したときにajaxでjsonデータを取得して次の画面を作ったり制御のためのデータを取得していたりします。
この記事ではデータの取得を題材にします。

詳細・手順

Gemを追加する

RailsでもJavascriptは使えますが、jQueryはGemを入れないと使えなかった……はず。
jQuery-railsを追加します。ドキュメントはこれ: https://github.com/rails/jquery-rails
Gemfileに追加。

gem "jquery-rails"

そしてbundle installします。（サイトによってはbundle updateとかありますが、updateは文字通りすべてのGemのバージョンを更新してしまうので、脆弱性対応などが必要なければinstallで十分です）
さらにappliation.jsなど、jQueryを使いたいjsファイルの先頭あたりに下記を書きます。

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs

jQueryのコードを書く

appliation.jsとかにまずは実行側から作っていきます。

app/assets/javascripts/application.js

    $.ajax('ajax/status', {
        type: 'get',
        dataType: 'json'
    }).done( (rsp) => {
        console.log("status: " + JSON.stringify(rsp))
    }).fail( (obj, ts, err) => {
        console.log("status: " + err)
    })

type, dataTypeは好きなものにできます。この要求を受けるRailsのコントローラー次第です。
私はこの実行関数をaddEventListenerで割り当てています。

Railsのコントローラー

コントローラーとアクションの作成

今回はurlをajax/statusにしたのでajaxコントローラーとstatusアクションを作ります。下記のようになるはず。

rails generate controller ajax status

コントローラーの実装

余計なところを端折るとこういう感じですね。
jsonで返したい場合、:content_type => "application/json" にしてやればjsonで受け取ってもらえます。

app/controllers/ajax_controller.rb

    def status
        hash =  { :is_playing => 1 }
        render :layout => "ajax",
               :content_type => "application/json",
               :status => 200,
               :locals => {
                   :status_json => JSON.dump(hash)
               }
    end

Layout

標準のlayoutだとheaderがあったりですが、今回はjsonを返すだけなので下記で十分。

app/views/layouts/ajax.html.erb

<%= yield %>

そしてlayoutも下記のみ。エスケープしないように%==にしてあります。

app/views/ajax/status.html.erb

<%== status_json %>

これで後は制御がapplication.jsに戻り、処理が完了します。簡単ですね。