Ajax通信を行う際のparamsのキーの設定について #JavaScript

Ajax通信を行う際のparamsのキーは、jQueryの方ではどのように設定しているのかが理解できたので、アウトプットします。

今回は、インクリメンタルサーチの実装におけるAjax通信のコードとコントローラのコードの一部のみを書きます。

Ajax通信のコード

search.js


$(function() {
  $(".search__products").on("keyup", function() {
    var input = $(".search__products").val();

    $.ajax({
      type: 'GET',
      url: '/products/search',
      data: { keyword: input },
      dataType: 'json'
    })
  });
});

3行目で、検索窓に入力された文字列のデータが、inputという変数に代入される。
8行目で、inputの変数をコントローラのparamsとして送るためのキーを設定する必要がある。このキーの名前は、コントローラのキーの名前と一致させる必要はある。その理由は、一致させなければ、paramsのキーが食い違ってしまい、Ajax通信ができなくなってしまうからである。

今回は、コントローラの方であらかじめ設定した以下のparamsのキーをAjax通信のdataという引数に渡しす。

products_controller.rb

params[:keyword]

コントローラのコード

products_controller.rb

def search
   @products = Product.where('title LIKE(?)', "%#{params[:keyword]}%")
   respond_to do |format|
     format.html
     format.json
   end
 end

2行目で、Ajax通信で送られてきたdataのキーが、コントローラのキーと一致するため、フロント側とコントローラ間のAjax通信が成功するようになる。
そして、その後paramsのキーに一致した複数のデータが@ productsに代入され、jsonの方に処理が行われる。