Help us understand the problem. What is going on with this article?

RailsのAjaxの苦手意識を消したい

More than 1 year has passed since last update.

初めに

RailsのAjaxやら非同期やらが難しそうでなかなか手が出せずにいたけどそろそろ勉強してみる

とりあえず投稿文字の反映をさせる

rails g controller words index 

でとりあえずコントローラーをつくる

indexに

index.html.erb
<h1 id="word"></h1>
<%= form_with url: '/words/post' do |f| %>
    <%= f.text_field :word %>
    <%= f.submit %>
<% end %>

と書く。

form_withはデフォルトで非同期通信を行ってくれるらしいのでこのままで大丈夫。

urlをアクション名で指定したかったがうまくできなかったので/words/postを書いている。

そのあとwords_controller.rbに

words_controller.rb
class WordsController < ApplicationController

  def index
  end

  def post
    @word = params[:word]
  end 

end

と書く

postにparams[:word]が送られてそれを@wordに入れている。

この時にviewsに書いてあるpost.js.erbが実行されるらしい。

ということで@wordを表示するためのコードをpost.js.erbに書く

post.js.erb
$('#word').html("<%= @word %>");

よくわからないがidがwordとなっているものの中身を<%= @word %>にするというコード

これで実行すると入力した文字が画面に表示されることになる。

検索結果の表示

つぎにAjaxでの検索結果の表示を実装したいと思う。

とりあえず

rails g model user name:string age:integer
rails g controller users 

をしてモデルとコントローラーを作る。

検索するためにデモのデータが必要になるから

Gemfileに

gem 'faker'

してbundle install

そのあと

db/seedに

db/seeds.rb
100.times do 
    user = User.new(name: Faker::Name.first_name, age: rand(100))
    user.save 
    if user.save
        puts "#{user.name}を作成"
    end 
end 

とすると100件のサンプルデータが作成できる。

コントローラーに検索結果を表示するためのindexを検索する際のアクションsearchを設定する

users_controller.rb
class UsersController < ApplicationController

    def index 
    end 

    def search
        @user = User.where 'name like ?', '%' + params[:name] + '%'
        @user = @user.to_json.html_safe
    end 

end

searchは@user に検索結果を入れてそのあとjsonの型式にしている。
なんでこれが必要かはよくわからないけど必要なよう。
html_safeはHTML形式のコードをそのまま出力するために必要。

さっきと同じように非同期でsearchアクションを行うとsearch.js.erbが実行されるので検索結果を表示するコードをsearch.js.erbに書きます。

search.js.erb
var user = <%= @user %>
var result = ''
user.forEach(function(e){
    result += '<li>' + e.name + ':  ' + e.age + '</li>'
});
$('#result').html(result);

user に @user を入れてそれをforEachで繰り返し処理しています。
resultに

taro 18みたいな感じで値を入れていきます。

index.html.erbは

index.html.erb
<%= form_with url: '/users/search' do |f| %>
    <%= f.text_field :name %>
    <%= f.submit %>
<% end %>

<table id="result"></table>

こんな感じです。

検索結果がvar resultに入れられて$('#result').html(result)でidがresultのところに検索結果が入っているresultを入れるという感じ。

最後に

まだほんとに基本中の基本しかわからないのでこれから知識を増やしていきたい。
何か間違っているところがあればご指摘いただければと思います。

sibakenY
大学卒業後Ruby, Ruby on Railsを勉強しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away