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

#制作環境

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

#はじめに

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

<font color="red">**【2020/11/27 古い書き方での記述だったので、書き方を変更しました。】**</font>

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

#関連記事

[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～事前準備編～](https://qiita.com/Charry/items/737085257784bd9fb6e2)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript編～](https://qiita.com/Charry/items/f605cbb686e8c0796450)
[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>
前回JavaScriptで作成した内容を、jQueryで作成したいと思います。

##以下作成条件

* <font color="red">記述にはjQueryを使用します。</font>
* 数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
* 検索するのにクリック操作を必要としません。`input`に入力されたら検索します。
* スクリプトの読み込みには`Laravel-mix`を使用します。
* 前回作成した`test.js`を編集して使用するで、必要なら`test2.js`等コピーを作成してバックアップしてください。

##完成イメージ

![image2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/aefa599b-9be4-3792-025d-71e9f5791a87.jpeg)

#スクリプトの作成

`resources>js`内の`test.js`を開き、以下のように記述します。
<font color="red">※前回のJavaScriptの内容は全て削除してください。</font>

<font color="red">**以下の記述方法は古い書き方だったので、記述を変更しました。**</font>

<font color="red">**記述変更前**</font>

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

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

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

        // 非同期通信を開始します
        $.ajax({
            // アクセスするurlを設定します
            url: '/form_search?trader_code=' + traderCode,
            // アクセスの方法を設定します
            type: 'GET',
            // コントローラから受け取ったデータ(検索結果)をdataに代入し以下の処理を実行します
            success: function(data) {
                 // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します
                $('#supplier').val(data[0].trader_name);
            }
        })
    })
})
```

<font color="blue">**記述変更後**</font>

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

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

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

        // 非同期通信を開始します
        $.ajax({
            // アクセスするurlを設定します
            url: '/form_search?trader_code=' + traderCode,
            // アクセスの方法を設定します
            type: 'GET',
        // コントローラから受け取ったデータ(検索結果)をdataに代入し以下の処理を実行します
        // successの代わりにdoneを使用します
        }).done(function(data) {
            // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します
            $('#supplier').val(data[0].trader_name);
        })
    })
})
```

#コンパイル

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

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

```PHP
npm run dev
```

#確認

その他は`JavaScript`の時に作成したものがそのまま使えるので、実際に`JavaScript`の時と同じ動作をするか確認してみてください。

#$.ajaxについて

`console.log`で`$.ajax`を確認すると、以下のようなデータが返ってきているのがわかります。

![response.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/443b67e1-2e8b-bfca-c2c5-784ccefcf0ef.jpeg)


`responseJSON`と`responseText`に目的のデータがあるのがわりますが、`responseText`の方はJSON.parseされていないので、業者名がおかしいです。

#success: function(data)について <font color="red">この書き方は古いので、doneを使用した記述にしてください。</font>

前回の`JavaScript`では`responseText`を使用してコントローラからデータを受け取りましたが、今回は引数に返り値を代入したい変数名を入れるだけで、データを受け取れます。
`data`の部分は好きな値で大丈夫です。

`console.log(data)`で確認すると、欲しい値が代入されているのがわかります。

![log.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/760252/604bf65f-8686-6ba1-709e-c9bac9531cd6.jpeg)


#.done(function(data)について

`.done`を指定すると同じように値を取得できます。

成功は`done`を使用し、失敗は`fail`を使うことで条件の分岐ができます。


今回はこれで終了です。
次回はaxiosで同じ事をしてみます。