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

#制作環境

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】 各記述方法 ～事前準備編～](https://qiita.com/Charry/items/737085257784bd9fb6e2)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery編～](https://qiita.com/Charry/items/74c66aea1a82070a6d3d)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × axios編～](https://qiita.com/Charry/items/ffd6db72de2c2be96e43)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × axios編～](https://qiita.com/Charry/items/0241c1b6a903c42cd9de)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～Vue.js × axios編～](https://qiita.com/Charry/items/7e932ce730a4d4c7e737)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × FetchAPI編～](https://qiita.com/Charry/items/8297146146a6b729c8f6)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × FetchAPI編～](https://qiita.com/Charry/items/9f22f61e5ef455b83ecb)

#今回作成するもの

<font color="blue">非同期通信(Ajax)を利用し、自動で仕入れ先が入力される機能を実装します。</font>

##以下作成条件

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


##完成イメージ

![image2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/e58b134b-8a94-dd08-1677-8feee366cf18.jpeg)

#スクリプトの作成

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

```JavaScript: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');`の下に追記します。

```JavaScript:app.js
require('./test');
```

#webpack.mix.jsの修正

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

<font color="blue">**修正前**</font>

```JavaScript:webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
```

<font color="red">**修正後**</font>

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

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

#コンパイル

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

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

```PHP
npm run dev
```

#コントローラの編集

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

```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`を開き、以下を追記します。

```PHP:web.php
Route::get('/form_search', 'FormController@get_trader')->name('ajax');
```

#確認

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

##検索イメージ

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

![image2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/4e5caa59-c38b-a512-4800-025449db7be4.jpeg)


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