More than 3 years have passed since last update.

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

Posted at 2020-11-30

#制作環境

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

#はじめに

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

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

#今回作成するもの

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です。

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

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