5.5 Ajax

Ajaxでフォームを送信する

Ajaxでフォームを送信するには、form_forおよびform_tagのremoteオプションをtrueにする必要があります。

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.create(post_params)
  end

  private
    def post_params
      params.require(:post).permit(:title, :body)
    end
end

app/views/posts/new.html.erb

<%= form_for @post, remote: true do |f| %>
  <%= f.text_field :title %>
  <%= f.text_area :body %>
  <%= f.submit "保存" %>
<% end %>

app/views/posts/create.js.erb

console.log('<%= @post.to_json %>');

remote: trueを設定することにフォームはAjaxで送信され、ページのリロードは起こりません。

コントローラはアクションを処理したあと、フォーマットがjsのERBテンプレートを呼び出します。この中ではインスタンス変数およびRubyのコードなどが実行できます。 今回の例ではJavascriptのconsole.logメソッドを使って@post変数の中身をJsonとして出力しています。

Ajaxのリンクを生成する

Ajaxのリンクを生成するにはlink_toメソッドのremoteオプションをtrueにする必要があります。

<%= link_to "削除", post_path(@post), method: :destroy, remote: true %>

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def destroy
    @post = Post.find(params[:id])
    @post.destroy
  end
end

上の例ではposts_controllerのdestroyアクションが呼ばれます。コントローラがアクションを処理するとdestroy.js.erbが呼ばれます。