Rails + jQueryでAjaxの動作テストをしてみる

はじめに

Rails + jQueryでAjaxの動作テストをしてみました。
フォームのテキスト項目に入力したユーザー名をキーに、usersテーブルを検索して、検索結果をフォームに表示する動作を、Ajaxで実現してみました。
尚、当記事は、こちらのサイトを参考にさせて頂いております。

参考URL
https://qiita.com/yuki-n/items/fdc5f7d5ac2f128221d1

環境

• Vagrant + Ubuntu 16.04.5 LTS
• Rails 5.2.4.2
• jQuery

やった事

scaffoldで雛形を作成します。
jQueryが動くように動作環境を整備します（手順は省略）。

$rails new scaffold_sample
$cd scaffold_sample
$rails g scaffold user name:string age:integer
$rails db:migrate

indexビューにテキスト項目と、検索結果を表示する項目を作成します。

index.html.erb

<input type=form id="form" placeholder="ユーザー名を入力" style="width: 250px;"/>
<p id="result1"></p>

coffeeスクリプトは利用しないで、jQueryを利用するため、javascrpts/user.coffeeの拡張子を、jsに変更します。そして、ビューのイベントに対応する処理と、イベントが駆動された時にAjax通信を行う設定を記述します。

javascrpts/user.js

$(document).on('turbolinks:load', function(){
    // blurは、テキスト項目からロストフォーカスした時に発生するイベント
    $(document).on('blur', '#form', function(e){
    e.preventDefault();
    
    //テキストで入力した値を変数にセット
    var input = $.trim($(this).val());  
    
    //ajax通信の設定
    $.ajax({
      url: '/users/search',             //searchメソッドへ遷移
      type: 'GET',                      //メソッドを指定
      data: ('keyword=' + input),       //テキスト項目に入力した値を変数にセット
      processData: false,               //おまじない
      contentType: false,               //おまじない
      dataType: 'json'                  //データ形式を指定
    })
    .done(function(data){               
       })
  });
});

userコントローラの中に、searchメソッドを作成するので、searchメソッドへのルートを設定します。

routes.rb

 resources :users do
    collection do
      get 'search'
    end
  end

usersコントローラの中に、searchメソッドを作成します。Viewのテキスト項目に入力した値が、jsファイルの中で、keyword変数にセットされて、コントローラに渡されてきます。コントローラの中では、keyword変数をキーに、Userテーブルを検索して、検索結果を、@user変数にセットしています。そして、json形式でrenderします。render先は、searchというビューあるのではなく、ajaxを利用する場合、遷移元（indexビュー）に遷移される事になります。

users_controller.rb

def search
    @user = User.find_by(name: params[:keyword])
    render json: @user
  end

jsファイルに、ajax通信が成功した後の処理（.doneの中身）を記述します。

javascrpts/user.js

$(document).on('turbolinks:load', function(){
    // blurは、テキスト項目からロストフォーカスした時に発生するイベント
    $(document).on('blur', '#form', function(e){
    e.preventDefault();
    
    //テキストで入力した値を変数にセット
    var input = $.trim($(this).val());  
    
    //ajax通信の設定
    $.ajax({
      url: '/users/search',             //searchメソッドへ遷移
      type: 'GET',                      //メソッドを指定
      data: ('keyword=' + input),       //テキスト項目に入力した値を変数にセット
      processData: false,               //おまじない
      contentType: false,               //おまじない
      dataType: 'json'                  //データ形式を指定
    })
    //ajax通信が成功したらdoneに入る （dataには@usersが入る)
    .done(function(data){               
        // data変数の中身を、viewの#result1に表示する
        $(data).each(function(i, user){ 
            $('#result1').text(user.id + " " + user.name)
        });
      })
  });
});

動作確認

rails sで、http://192.168.33.10:3000/users にアクセスします。
適当にデータを新規更新します。

hemeと入力して、ロストフォーカスすると、#result1に検索結果が表示されています。

aopoと入力して、ロストフォーカスすると、#result1に検索結果が表示されています。