More than 3 years have passed since last update.

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

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

#制作環境

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

#はじめに

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

【2020/11/27 古い書き方での記述だったので、書き方を変更しました。】

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

#今回作成するもの

非同期通信(Ajax)を利用し、自動で仕入れ先が入力される機能を実装します。
前回JavaScriptで作成した内容を、jQueryで作成したいと思います。

##以下作成条件

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

##完成イメージ

#スクリプトの作成

resources>js内のtest.jsを開き、以下のように記述します。
※前回の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);
            }
        })
    })
})

記述変更後

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);
        })
    })
})