【Ruby on Rails】Ajaxで非同期通信

RailsでAjaxを使ってみたので忘備録

フォームでselect「クラス」（１組、２組、３組）を選ぶと、ページ遷移せずに（Ajax使用）、そのクラスのメンバーの情報が表示される例

データベースはClass table(id, class_name)と、Member table(id, member_name, class_id)

としました。

app/javascript/pack/ajax.js

document.addEventListener("DOMContentLoaded",
function() {
 document.getElementById("select_classes").addEventListener("change", changeClassEvent, false);

 function changeClassEvent() {

  const selectedClass =  Number(document.getElementById("select_classes").value);

$.ajax({url: "/search",type: "GET",
 data: {
  class_id:selectedClass
 }
})
.done(function() {
 console.log("ajax success");
})
.fail(function() {
 console.log("ajax error");
});

}

},false
);

app/views/search.html.erb

<%= form_with url: root_path do |f| %>

<%= f.select :class_id, Class.all.pluck(:class_name, :id), prompt:"クラスを選択してね" ,{id:"select_classes"} %>

<% end %>

<div><%= @ajax_members %></div>

<%= javascript_pack_tag 'ajax' %>

app/controllers/searches_controller.rb

def search

 @ajax_members = Member.where(class_id: params[:class_id])

end 

おやすみなさいぃぃぃぃ