【Rails 입문】Ajax를 도입한다

0. 이전 준비

사전 준비로 컨트롤러를 만듭니다.

$ rails g controller Practice index 

1. View 정돈

app/views/practice/index.html.erb

<h1>Ajaxを使ってみよう</h1>
<!-- :remote => trueの部分で、turbolinkを有効にする -->
<%= form_tag(url_for(:action => 'index'), :remote => true) do %>
  <%= text_field_tag :title %>
  <%= submit_tag "タイトルを変更する" %>
<% end %>

turbolink => turbolink를 사용하면 ajax를 자동으로 사용할 수 있습니다.

2. Controller 수정

app/controllers/practice_controller.rb

def index
  @title = params[:title]
  # respond_toメソッド => 結果をどのフォーマットで返すかを指定している
  respond_to do |format|
    # turbolinkが有効でないとき
    format.html
    # turbolinkが有効なとき
    format.js # => 次にindex.js.erbが呼ばれる
  end
end

respond_to 메서드 => 특정 객체가 특정 메서드를 가지고 있는지 확인하고 true 또는 false를 반환합니다.

3. route 지정

index에 포스트하고 있으므로, app/config/routes.rb에 이하와 같이 자원을 배분한다.

app/config/routes.rb

get 'practice/index'
post 'practice/index' # 追加

4. JS 지정

format.js로 지정한 index.js.erb를 app/views/practice/에 작성한다.

app/views/practice/index.js.erb

$('h1').html("<%= @title %>");

5. jQuery를 사용할 수 있도록 설정

Rails 5.x부터 jQuery가 표준으로 지원되지 않게 된 것 같다고 스스로 설정해야 할 것 같다.

app/assets/javascripts/application.js

//= require jquery <= 追加
//= require rails-ujs
//= require turbolinks
//= require_tree .

Gemfile

gem 'jquery-rails'

gem을 추가하고,

$ bundle install

5. Ajax의 움직임 확인

$ rails s

서버를 시작하고 http://localhost:3000/practice/index에 액세스합니다.


↓


비동기 처리에 성공했습니다.

6. 마지막으로 Rails에 둘 수 있는 Ajax의 흐름을 확인한다

6-1. turbolinks 또는 jQuery 등을 사용하여 Javascript에서 XMLHttpRequestRequest를 보내고 모든 작업을 수행

6-2. 액션이 실행된다(이동안 DB와의 교환이 가능하다). 또한 어떤 형식으로 데이터를 반환할지 지정할 수 있습니다. (Javacript, JSON, XML 등)

6-3. 선택한 데이터 형식으로 (이번에는 자바 스크립트) 파일을 자동으로 검색하여 파일 내용을 실행합니다 (이번에는 index.js.erb). 한다.