日々アウトプット！
今回はgemのjbuilderを使って、非同期通信を実装しました。
イメージ
実際の画面
流れとしては、ブラウザから送信された情報をjavascriptのajaxで受け取り、
コントローラーのアクションを動かして、javascriptで受け取り再びview画面に表示です。
javascriptを使うことでページ遷移せずに表示できるようになるのすごいですよね。
javascript での処理
今回はjQueryで記述しています。
$('#user-search-field').on('keyup', function(){
var input = $("#user-search-field").val();
$.ajax({
type: 'GET',
url: '/users',
data: { keyword: input },
dataType: 'json'
})
onメソッドでkeyupをトリガーにして、functionを発動させる。
$.ajax
ajaxとは非同期にサーバーとの通信を行うこと。
有名なサービスとしては、googlemapなどがありますね。
同期通信
webブラウザからサーバーにリクエストを送り、
全ての情報を受け取るので画面が真っ白になり一新される。
非同期通信
一部の情報だけサーバーとやりとりして更新する。
type:はhttp通信でどういうメソッドを使うか指定する。
今回は'get'メソッドを使っています。
url:データの送り先
ターミナルでrake routesで確認できます。
data:キーと一緒に送りたいデータを入れる。
dataType:送るデータの形式を指定しています。
json.jbuilder
こちらの機能はRailsで用意されているgemの１種です。
gem 'jbuilder'
$ bundle install
jbuilderファイルはviewsディレクトリの階下に作成します。
その際ajaxで使用しているコントローラーと同じ名前のフォルダの中に、
コントローラーのアクション名をファイルネームに使用します。
jbuilderファイルの中では、json.KEY VALUE という記述の仕方をします。
こうすることによって、javascriptに値が帰ってきた際にKEYで値を呼び出すことができる。
今回のjbuilderファイルでは配列型になりように記述していますが、
配列にしないのであれば、do 〜 endの中身だけでも動きます。
javascript .done()
冒頭にありました実際の画面を実装しているjavascriptのコードの一部をご紹介します。
下記のコードは検索した名前を表示させるコードです。
$('#user-search-field').on('keyup', function(){
var input = $("#user-search-field").val();
$.ajax({
type: 'GET',
url: '/users',
data: { keyword: input },
dataType: 'json'
})
.done(function(user_names){
$("#user-search-result").empty();
if (user_names.length !== 0){
user_names.forEach(function(user_name){
appendSearchedUserHTML(user_name);
});
}
else {
appendErrMsgToHTML("一致するユーザーが存在しません。");
};
})
.fail(function(){
alert('通信に失敗しました');
})
});
ajaxの下のdoneとfailの処理について、jbilderファイルから帰ってきた値をもとにviewにどういう動作を与えるかを書いている処理になります。
問題なく通信されれば、doneの処理が始まりますが、どこかで問題があれば、failの処理が行われます。
doneの中に定義されているfunctionの引数には帰ってきた値が含まれています。
今回はjbuilderで定義していたデータが配列型担っているので、
forEachメソッドを使って一つずつ取り出し、処理を行うように記述しています。
appendSearchedUserHtmlは自分で定義したメソッドで、
帰ってきた値を代入したHTML要素を変数に代入するメソッドを作っています。
下記参考
function appendSearchedUserHTML(user_name) {
var html = `<div class="chat-group-user clearfix">
<p class="chat-group-user__name">${user_name.name}</p>
<a class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id="${user_name.id}" data-user-name="${user_name.name}" >追加</a>
</div>`
search_list.append(html);
};
以上