#制作環境

Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
axios : 0.19
Vue : 2.5.17
XAMPP
PHP : 7.4.3
Visual Studio Code

#はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

前回のつづきになります。

#関連記事

Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～事前準備編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～jQuery編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～JavaScript × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～jQuery × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～Vue.js × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～JavaScript × FetchAPI編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～jQuery × FetchAPI編～

#今回作成するもの

非同期通信(Ajax)を利用し、自動で仕入れ先が入力される機能を実装します。

##以下作成条件

記述にはJavaScriptを利用します。
数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
検索するのにクリック操作を必要としません。inputに入力されたら検索します。
JavaScriptの読み込みにはLaravel-mixを使用します。

##完成イメージ

#スクリプトの作成

resources>js内に新しくtest.jsを作成し、以下のように記述します。

test.js

// DOM 構築後に実行したい関数の呼び出し
window.onload = function() {

    // inputのid="code"(業者コード)の要素を取得し、inputイベントを監視します
    // 業者コードに値が入力されたら以下の内容を実行します
    document.getElementById('code').addEventListener('input', function() {

        // 入力された値を変数traderCodeに代入します
        let traderCode = document.getElementById('code').value;

        // 入力された値が4桁未満の時は検索させないようにします
        if (traderCode.length < 4) {
            return;
        }

        // XMLHttpRequest オブジェクトを作成します
        let xhr = new XMLHttpRequest();

        // 非同期通信でアクセスするURLを作成しurlに代入します
        let url = '/form_search?trader_code=' + traderCode;

        // open('アクセスの方法', 'アクセス先')
        // アクセス方法は GETやPOSTです
        // アクセス先は作成したurlです
        xhr.open('GET', url);
        // 通信を開始します
        xhr.send();

        // 通信状態が変化した時に発火するイベントを設定します
        xhr.onreadystatechange = function() {
            // 通信状態の確認を行い、エラーがなければ後の処理を実行します
            if (xhr.readyState === 4 && xhr.status === 200) {

                // コントローラから受け取るデータ(検索結果)の文字列を JSON として解析し
                // dataに代入します
                // responseTextでデータを受け取れます
                let data = JSON.parse(xhr.responseText);

                // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します
                document.getElementById('supplier').value = data[0].trader_name;

            }
        }
    })
}

##readyStateとstatusについて

readyStateでは通信の状態を確認できます。
readyStateの値の意味は以下の通りです。

値	状態	内容
0	準備段階	まだ通信は行われていない状態
2	通信開始	サーバーとの通信が始まっている状態
3	受信中	サーバーからデータを取得している状態
4	通信完了	データを取得し通信が終了している状態

statusを確認することで、通信時に発生したエラーのハンドリングを行うことができます。
statusの主な値の意味は以下の通りです。

値	状態	内容
200	成功	問題なく通信が成功した状態
401	エラー	認証が必要なため通信できない状態
403	エラー	アクセスが禁止されていて通信できない状態
404	エラー	情報が存在しないために通信できない状態
500	エラー	サーバー側のなんらかの不具合で通信できない状態
503	エラー	サーバーに負荷がかかって通信できない状態

#app.jsへの登録

Laravel-mixで、作成したtest.jsが読み込めるようにします。

resources>js内のapp.jsを開き、以下の記述をrequire('./bootstrap');の下に追記します。

app.js

require('./test');

#webpack.mix.jsの修正

webpack.mix.jsを開き以下のように修正してください。

修正前

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

修正後

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version();

古いキャッシュを読まないように、この修正を行ってます。

#コンパイル

ターミナルを起動し、以下を実行してください。
※node.jsが必要です。インストールされていない方は、インストールを行ってください。

node.js
https://nodejs.org/ja/

npm run dev

#コントローラの編集

前回作成したFormController.phpを開き、以下のメソッドを追記してください。

FormController.php

public function get_trader(Request $request)
{
    // リクエストパラメータからtrader_codeを取得し$traderCodeに代入します
    // リクエストパラメータはURLで送られてくる値です
    // /form_search?trader_code=●● この●●の部分を取得してます
    $traderCode = $request->trader_code;

    // traderテーブルから、trader_codeが業者コードに入力された値と同じものを抽出し
    // $traderTableに代入します
    $traderTable = Trader::where('trader_code', '=', $traderCode)->get();

    // $traderTableを返します(これでtest.jsのresponseTextにデータが渡されます)
    return $traderTable;
}

#ルーティングの編集

routes内のweb.phpを開き、以下を追記します。

web.php

Route::get('/form_search', 'FormController@get_trader')->name('ajax');

#確認

業者コードを入力し、仕入れ先が反映されるか確認してください。
業者コードと業者名はあらかじめ登録しておかないと反映されませんので、お気を付けください。

##検索イメージ

入力された値が4桁になったら、検索されて反映されます。

JavaScript編は以上で終了です。
お疲れ様でした。