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

制作環境

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

今回作成するもの

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

以下作成条件

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

スクリプトの作成

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

test.js

// ここから先はjQuery編と変わらないため、詳細は割愛します
$(function() {
    $('#code').on('input', function() {
        let traderCode = $('#code').val();

        if (traderCode.length < 4) {
            return;
        }

        let url = 'form_search?trader_code=' + traderCode;
// ここまでjQuery編と変わらない

        // ここから先はJavaScript × FetchAPI編と変わらないため、詳細は割愛します
        fetch(url).then(response => response.json())
            .then(data => {
        // ここまでJavaScript × FetchAPI編と変わらない
                // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します 
                $('#supplier').val(data[0].trader_name);
            })
    })
})

コンパイル

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

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

npm run dev

動作確認

コンパイルまで完了したら動作を確認してください。
問題無く業者名が表示されればOKです。

以上で終了です。
お疲れさまでした。