制作環境

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】各記述方法～JavaScript編～
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】各記述方法～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編～

今回作成するもの

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

以下作成条件

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

スクリプトの作成

resorces>js内のtest.jsを開き、以下のように記述します。
前回の内容は全て削除してください。

test.js

// ここから先は前回のjQuery編の記述と同じため詳細は割愛します。
$(function() {

    $('#code').on('input', function() {
        let traderCode = $('#code').val();

        if (traderCode.length < 4) {
            return;
        }
// ここまでは前回のjQuery編の記述と同じ

        // アクセス先のURLを作成し、urlに代入します。
        let url = '/form_search?trader_code=' + traderCode;

        // ここから先は前回のJavaScript × axios編の記述と同じため詳細は割愛します。
        axios.get(url).then(function(response) {
            let data = response.data;
        // ここまで前回のJavaScript × axios編の記述と同じ

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

コンパイル

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

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

npm run dev

確認

その他の内容は前回と変わらないので、ここまでできたら動作を確認してください。

以上です。
次回に続きます。