Rails의 Ajax 통신으로 모든 객체를 출력합니다.

소개

Ajax 토우 단어를 훨씬 멋지다고 생각했습니다만, 한 번도 사용한 적이 없었기 때문에, 실제로 사용해 보았습니다.
여기에서는 Rails에서의 구현이 됩니다.

Scaffold를 사용해 간단하게 실장해 나가므로, 따뜻하게 지켜봐 주세요.

이번에 만드는 것

이번 만드는 것은 매우 간단하고 링크를 클릭하면 기존 데이터를 Ajax에서 꺼내는 것.

jQuery 소개

layout 파일이 있으므로 head 안에 script 태그를 씁니다.
이번에는 CDN에서 당겨 왔습니다.

app/views/layouts/application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

우선 움직이는 앱 만들기

Scaffold에서 사용자 목록이 표시되는 앱을 만듭니다.

rails g ajax_test
cd ajax_test

rails g scaffold user name:string
rails db:migrate

데이터 넣기

db/seeds.rb

(1..10).each do |i|
  User.create(name: "ユーザー#{i}")
end

데이터를 흘려 넣고, 제대로 데이터가 들어 있으면 OK입니다!

rails db:seed
rails c
> User.count
=> 10

controller

app/controllers/users_controller.rb

def ajax_test
  @user = User.all
  render json: @user
end

루트

config/routes.rb

Rails.application.routes.draw do
  resources :users
  get "ajax_test", to: "users#ajax_test"
end

이 시점에서http://localhost:3000/ajax_test로 이동하십시오.

그러면 이런 느낌으로 json 데이터로 돌아온 것을 알 수 있다고 생각합니다.
이번에는 이것을 view로 좋은 느낌으로 출력할 수 있도록 합니다.

보기

remote: true 를 붙이면, Ajax 통신해 주게 됩니다.

app/views/users/index.html.erb

<h1>AjaxTest</h1>
<%= link_to "全てのuserを表示", ajax_test_path, {id: "ajax_test", remote: true} %>

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

js 파일 만들기

app/assets/javascripts/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></tr>")
      for i in [0..response.length]
        $("#user").append("<tr><td>" + response[i].name + "</td></tr>")
    .fail (response) ->
      #処理が失敗した時の処理
      alert 'fail'

처리의 흐름으로서는,
1. ajax_test라는 id를 클릭하면 이벤트가 호출됩니다.
2. url: '/ajax_test' 에서 ajax_test에 액세스하면 응답으로 json 데이터가 반환됩니다.
3. 통신에 성공(done)하면 지정한 id에 요소 + json 데이터를 출력
(실패하면 경고)

라는 느낌입니까?

이제 http://localhost:3000/users로 이동하여 링크를 클릭하면 다시로드되지 않고 저장된 모든 사용자가 표시되었을 것입니다.

요약

Ajax를 사용하는 것으로, 일일이 리로드를 기다리지 않아도 되므로 유저 빌리티가 오르고, 대단하다고 실감.
(이번 예에서는 반대로 사용하기 어렵게 하고 있습니다만)

앞으로도 공부하겠습니다.