Railsでajaxを使って結果をjsonで受け取る方法

Rails Ajax

jquery-railsを使った時のajaxの動作のメモ。 フォームをajaxで送信し、jsonを受け取る処理を想定している。

view部分

フォームにremote: trueとformat: 'json'を設定する。

#/app/views/post/new.html.slim
= form_for @new_post, remote: true, format: 'json' do |f|
  = f.label :title
  = f.text_field :title
  = f.submit 'Post'

controller部分

render jsonでjsonを返す。

#/app/controllers/post_controller
def create
  @post = Post.new(post_params)
  if @post.save
    render json: { status: 'success' }
    # 非ajaxでのリクエストも受け付ける場合は以下のようにする
    # respond_to do |format|
    #   format.html { redirect_to @post }
    #   format.json { render json: { status: 'success' } }
  else
    render json: { status: 'error'}
  end
end

coffeescript部分

viewでremote: 'true'を指定した要素(今回はフォーム)をレシーバにしてon()を呼ぶ。

on()は引数によって異なる動作をし、on(event, func())の場合には、レシーバの要素に eventを設定する。 on(event, selector, func())の場合にはselectorの要素にeventを設定する。 詳細はtacamy.blogを参照。
今回はon(event, func())の場合を扱う。

on関数のevent引数には、jquery-railsでajax用のイベント(ajax:success等)が 定義されているのでそれを使う。 イベントの一覧はCustom events fired during "data-remote" requests を参照。

on関数のfunc()引数の部分に、レスポンスが帰ってきた時の処理を書くわけだが、 この時のfunc()の引数が、on関数のevent引数に指定した値によって変わってくる。 func()の第1引数はeventで固定だが、第2引数以降はCustom events fired during "data-remote" requestsの 表のextra parmetersに書かれているものを指定する。

#/app/assets/javascript/post_new.js.coffee
$ ->
  $('#new_app')
    .on 'ajax:success', (event, data, status, xhr) ->
      # dataがJSONオブジェクトになっているので、それを適当に処理する。
    .on 'ajax:error', (event, xhr, status, error) ->
      alert error