More than 3 years have passed since last update.

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

Last updated at 2020-11-30Posted at 2020-11-28

#制作環境

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

#はじめに

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

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

#今回作成するもの

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

#確認

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

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

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 × axios編～

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