Posted at

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

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の方に処理が行われる。