[Javascript]Ajaxを使う

ずっと使ってみたかったのですが、今回やっとAjaxデビューしました！
laravelでのデータベース処理が意外と調べても出てこなかったのでまとめておきます。

環境

laravel 6.18 /postgres 12.3 /jquery 3.2.1

概要

社員検索画面で、部署を選ぶとその部署に所属する人をデータベースから探し出して表示します。

Ajaxとは

JavaScriptを利用してサーバーと非同期通信を行い、受信データをDOM経由でページに反映させる処理です。
DOMとは、Document Object Modelの略称で、ドキュメントツリーを操作するためのAPIで、DOMを利用することでHTMLを自由に操作できます。

１番身近な例はGoogle Mapです。ページをスクロールすると読み込む事なく地図をどんどん表示してくれます。非同期通信で地図表示を行うと同期通信に比べ必要とするデータ量が少なく、表示時間も高速になります。

jqueryを読み込む

ファイルを直接ダウンロードして読み込むことも出来ますが、GoogleなどにホストされているCDNを使って読み込む方法が主流となっているようだったので以下サイトから読み込みました。

Hosted Libraries  |  Google Developers

html

<form>
<select id="depart" name='depart' class='form-control flex-items' onChange="pickEmployees();">
    <option value=''>部署を選んでください</option>
    <option value='事業推進部'>事業推進部</option>
    <option value='システム開発部'>システム開発部</option>
    <option value='営業部'>不動産投資営業部</option>
 </select>
<select id="conceal" name="name" class='form-control mr-2 flex-items'>
   <option value="">名前を選んでください</option>
       @foreach($employees as $employee)
           <option value="{{ $employee->name }}">{{ $employee->name }}</option>
       @endforeach
</select>
<input type="submit" value='探す' class='btn btn-success flex-items'>
</form>

部署を選んだら、その部署の人の名前だけが表示されて選べるようにします。

js

 function pickEmployees()
   {
       let obj = document.getElementById('depart');
       let index = obj.selectedIndex;//選択した選択肢のindex番号取得
       let value = depart.options[index].value;//選択したoptionのvalueの値を取得
       $.ajax({
           headers:{
               'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
           },//headersを書き忘れるとエラーになる
           type:"GET",//リクエストタイプ(postでも可)
           url:"test/ajax",　//指定したコントローラーに付随するurl
           data:{"value":value},//laravelに渡すデータ
           dataType:"json" //データの取得タイプ
       }).done(function(data){
           //非同期通信に成功したときに行いたい処理
           //元からあるselectのoptionを削除
           let select = document.getElementById('conceal');
           let options = select.options.data
           for(let i = options.length -1; 0 <= i; --i ){
               select.remove(i);
           }
           //laravel内で処理された結果がdataに入って返ってくる
           for(let i in data){
               $("#conceal").append("<option value=" + data[i] + ">" + data[i] + "</option>");
           }
       }).fail(function(){
            //失敗した時の処理
           alert('非同期に失敗しました');
       });
   }

データベースとのやりとりはlaravel側で行います。controllerを作って処理する場所を作ります。

web.php

Route::get('test/ajax','AjaxController@ajax');

先ほど指定したリクエストタイプ(get)を指定。

AjaxController

public function ajax(Request $request)
   {
       header('Content-type:application/json;charset=utf-8');
       $depart = $request->value;
       $employees = Employee::where('depart',$depart)->pluck('name');
       return $employees;
   }
   

社員情報が入っているemployeesテーブルから、選ばれた部署と一致する部員を取得しました。
あとは先ほどjsファイルに書いた通り、selectのoptionを取り出したデータに置き換えます。

今回の記事を参考にいろいろなapiに挑戦してみてください！

改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで