Rails jQuery의 ajax화 방법 사용

6048 단어 jQueryRails
jQuery를 사용하여 Rails의 ajax를 구현합니다.
기본적으로 알기 쉬운 삭제의 aax화를 예로 들어 aax화 방법을 소개한다.

글 삭제 aax화


아래에 보도된 쓰레기통 아이콘을 누르면 기사가 갑자기 사라진다.

우선, 쓰레기통 아이콘의 링크에remote:true를 추가합니다.rails는 이렇게 나에게 aax의 통신을 진행한다.
article.erb
<%= link_to content_tag(:i, '', class: 'fa fa-trash'), article_path(article.id), method: :delete, data: { confirm: "本当に削除してもよろしいですか" }, class: "article_delete", remote: true %>
그러나 이렇게 하면 기사의 삭제만 실행되고 데이터베이스에서 사라지며 화면에서 업데이트되지 않으면 사라지지 않는다.여기서부터ajax의response를 받고 바로 기사를 사라집니다.
controllerrender :json를 사용하여 데이터를 js 측에 보냅니다.
articles_controller.rb
  def destroy
    writer = Article.find(params[:id])['user_id']
    if @user.id != writer
      redirect_to articles_path, :flash => {:alert => "削除権限がありません。"}
    else
      @article.destroy
      render :json => {:article => @article}
    end
  end
aax의 데이터를 받아들여서 모든 글을 삭제합니다.
이번 기사는 #item _이 id 때문에fade Out을 합니다.
articles.js
(function() {
  $(function() {
    $(document).on('ajax:complete', '.article_delete', function(event, ajax, status) {
      var response;
      response = $.parseJSON(ajax.responseText);
      $('#item_'+response.article.id).fadeOut();
    });
  });
}).call(this);
이게 완성이야.쓰레기통 아이콘을 누르면 기사가 페이드 아웃될 거예요.

적용 가능


여기에서 삭제를 예로 들면, 같은 방법으로 각양각색의 일을 aax화할 수 있다.
예를 들어comment의create의ajax화는form에remote:true를 추가하고 컨트롤러에서 일부 템플릿을 이용하여 html를 받아들인 다음에ajax로 디스플레이를 받아들인다.
comments_controller.rb
  def create
    @comments = @article.comments.create(comment_params)
      html = render_to_string partial: 'articles/comment_show', locals: { comment: @comments }
      render :json => {:html => html}
  end

좋은 웹페이지 즐겨찾기