Posted at

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


初めに

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を入れるという感じ。


最後に

まだほんとに基本中の基本しかわからないのでこれから知識を増やしていきたい。

何か間違っているところがあればご指摘いただければと思います。