개시하다

이미 많은 기사가 났으니, 나는 그것을 자신의 비망록으로 쓰고 싶다.

비동기 통신의 장점

개인이 먼저'이런 기술을 왜 쓰는가'를 배워요.
목적이 명확하기 때문에 이해가 빠르다고 생각해요.

１. 페이지를 변환하지 않고 일부 페이지만 업데이트합니다.

매번 좋을 때마다 페이지가 옮겨지는데, 솔직히 나는 상당히 번거롭다고 생각한다.
그러나 비동기 통신을 사용하면 페이지 이동을 하지 않고 평론을 할 수 있고 좋은 대화를 할 수 있으며 사용자 편집도 할 수 있습니다!

실장!

단계 ① 서버에 JS 형식의 요청 보내기

우선 비동기 통신이 아니라면 실행할 때의 단말기는 다음과 같다.

요청 형식을 그림의 빨간색 부분으로 출력합니다.
이런 상황은 HTML 형식의 통신이죠!
이 녀석을 JS 형식으로 만들고 싶어!
_favorites.html.erb

<%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>

이렇게 하면 좋은 단추 링크에remote를 추가합니다. 정말로 JS 형식의 요청을 보낼 수 있습니다.

②단계 ② 버튼 섹션 템플릿 만들기

비동기 통신을 실현하기 위해서는 변경 부분을 부분 템플릿으로 삼아야 한다.
구체적으로 업데이트하고 싶은'괜찮은'상자를 준비했습니다.
'괜찮다'거나'안 했다'상태에서 디스플레이를 전환하는 인상을 준다.
views/posts/_favorites.html.erb

  <% if post.favorited_by?(current_user) %>
    <%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>
      <span class="btn btn-danger">いいね外す</span>
    <% end %>
  <% else %>
    <%= link_to post_favorites_path(post), method: :POST, remote: true do %>
      <span class="btn btn-primary">いいねする</span>
    <% end %>
  <% end %>

부분 템플릿views/postsfavorites.html.eb 만들기
괜찮은 버튼 부분을 여기로 옮겨라.
그리고 원래 index.방금 만든 일부 템플릿을 호출합니다.
views/posts/index.html.erb

<div class="main_contents">
    <% @posts.each do |post| %>
        <div class="post_contents">
          <h2><%= link_to post.title, post_path(post.id) %></h2>
          <%= post.content %>

         <!-- ↓追加(部分的に更新したい場所)↓ -->
          <div id="favorite-<%= post.id %>">
             <%= render 'posts/favorites', post: post %>
          </div>
         <!-- ↑ここまで↑ -->
        </div>
  <% end %>
</div>

③ js 단계.erb 파일 만들기

HTML 형식으로 요청한 경우view 파일은views/컨트롤러 이름/동작 이름입니다.html.erb
라는 문건을 남겼다.
단, JS 형식의 요청에 대해views/컨트롤러 이름/동작 이름입니다.js.erb
라는 문건을 남겼다.
이번에favorites 컨트롤러의create를 사용하여destroy동작이 좋은 기능을 실시하고 있기 때문에
views/favorites/create.js.erb와views/favorite/destroy.js.erb
파일을 만듭니다.
views/favorites/create.js.erb

 #id="favorite-<%= @post.id %>"この部分のHTMLだけ、renderで部分的に更新するという処理です
$("#favorite-<%= @post.id %>").html("<%= j(render 'posts/favorites',  post: @post ) %>");

views/favorites/destroy.js.erb

$("#favorite-<%= @post.id %>").html("<%= j(render 'posts/favorites',  post: @post ) %>");

④ 디렉터 리디렉션 제거

controllers/favorites_controller.rb

    def create
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.build(post_id: @post.id)
      favorite.save
      redirect_to root_path #←この行を削除
    end

    def destroy
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.find_by(post_id: @post.id)
      favorite.destroy
      redirect_to root_path #←この行を削除
    end

완성!

이상의 절차는 기능의 비동기화를 실현할 수 있다!

참고 자료

Ajax(비동기식 통신)에 대해 알기 쉬운 부분에 중점을 두고 정리했습니다(Rails 사용 프레젠테이션 첨부)