jsファイルからGETでControllerに値を渡す

環境

Rails5.2
Slim

はじめに

以前、「link_toでViewからControllerに値を渡す」という題で記事を書いたことがあります。この記事の内容は、Controllerへ受け渡すパラメータを、link_toで直接指定するといったものでした。

今回の記事は、link_toではなく、jsファイルにパラメータを指定してControllerへ渡すといった方法になります。jsファイルでパラメータを指定できれば、Viewで作成した画面項目に入力した値を、GETを使って、Controllerへ受け渡すといったことが可能になります。

事前準備

SeikyusControllerクラスの中に、testというメソッドを作成しました。

seikyus_controller.rb

class SeikyusController < ApplicationController
	def index
	end
	def test
	    redirect_to seikyus_url
	end
end

SeikyusControllerクラスのtestメソッドへのルート情報を設定します。

routes.rb

resources :seikyus do, only: [:index]
    get  :test,   on: :collection
end

やったこと

Viewの中に、testメソッドへのリンクを作成します。

index.html.slim

= link_to "テスト", test_seikyus_path, id: 'lnk_test'

app/assets/apjavascripts/seikyu.jsを新規作成します。application.jsからseikyu.jsが読み込まれるため、下記の記述があることを確認します。デフォルトでは作成されているはずです。

application.js

//= require_tree .

seikyu.jsに、リンクでクリックイベントが発生したときの処理の雛形を作成します。まずは、リンクをクリックして、コンソールに「OK」が表示されるところまでを確認します。

seikyu.js

document.addEventListener('turbolinks:load', function() {
    document.getElementById('lnk_test').addEventListener('click', function() {
        test_get();
    })
}, false)

function test_get() {
    console.log("OK");
}

リンクをクリックして遷移するURLの末尾に、URLパラメータを付加します。URLパラメータの書き方には決まった型があります。型が外れていてもGETで送信することはできます。しかし、サーバー側で正しく値を取得することができなくなります。

URLパラメータは、先頭１文字には必ず「？」を指定します。その後に「キー=値」の形でします。「キー=値」が複数ある場合は、「&」を使って連結します。

下記例では、「aa」、「bb」、「cc」という３つのキーに、「1」、「2」、「あいう」という値をそれぞれセットしています。

seikyu.js

function test_get() {
    let lnk_test = document.getElementById('lnk_test');
    let param    = "?aa=1&bb=2&cc=あいう";
    lnk_test.setAttribute('href', lnk_test.href + param);
}

URLパラメータは、Railsの中で、paramsというハッシュ型の変数にセットされます。Controllerの中から、paramsの中身を確認することができます。paramsの中身を取得して、URLパラメータの内容が正しく取得できていることを確認します。

seikyus_controller.rb

def test
    @debug = Rails.application.config.pri_logger
    @debug.error(params)
    @debug.error(params[:aa])
    @debug.error(params[:bb])
    @debug.error(params[:cc])
    
    redirect_to seikyus_url
end

ログを確認すると、確かに、URLパラメータが取得できていました。

debug.log

: <ActionController::Parameters {"aa"=>"1", "bb"=>"2", "cc"=>"あいう", "controller"=>"seikyus", "action"=>"test"} permitted: false>
: 1
: 2
: あいう

補足（その１）

画面のテキスト項目で入力した値や、ラジオボタンで設定した値を取得して、URLパラメータとして受け渡すこともできます。

seikyu.js

function test_get() {

    var kbn;
    if (document.getElementById('chk_seikyus_kbn').checked){
        kbn = 1;
    }else{
        kbn = 2;
    }
    let txt = document.getElementById('txt_seikyus_ym').value;

    let param    = "?aa=" + kbn + "&bb=" + txt;
    lnk_test.setAttribute('href', lnk_test.href + param);
}

paramsの中身を見ると、画面に入力した値を正しく取得できていることが確認できます。

debug.log

<ActionController::Parameters {"aa"=>"1", "bb"=>"2022-11", "controller"=>"seikyus", "action"=>"test"} permitted: false>

補足（その２）

ログファイルは、次のように設定しています。

development.rb

config.pri_logger = Logger.new(Rails.root.join('log/debug.log'))