제작 환경

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 낡은 쓰는 방법으로의 기술이었으므로, 쓰는 방법을 변경했습니다. 】

마지막으로 계속됩니다.

관련 기사

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】 각 기술 방법 ～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편～
Laravel 6.x 비동기 통신(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 각 기술 방법 ～jQuery × FetchAPI편～

이번에 만드는 것

비동기 통신(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);
        })
    })
})

컴파일

터미널을 시작하고 다음을 수행합니다.
※node.js가 필요합니다. 설치되어 있지 않은 분은 설치하십시오.

node.js
htps : // 그래서 js. 오 rg / 그럼 /

npm run dev

확인

그 외는 JavaScript 의 때에 작성한 것이 그대로 사용할 수 있으므로, 실제로 JavaScript 의 때와 같은 동작을 하는지 확인해 보세요.

$.ajax 정보

console.log 에서 $.ajax 를 확인하면 다음과 같은 데이터가 반환되고 있음을 알 수 있습니다.


responseJSON 와 responseText 에 목적의 데이터가 있는 것을 알 수 있습니다만, responseText (은)는 JSON.parse 되어 있지 않기 때문에, 업자명이 이상합니다.

success : function (data) 정보이 쓰기는 오래되었으므로 done을 사용하여 작성하십시오.

이전의 JavaScript 에서는 responseText 를 사용해 컨트롤러로부터 데이터를 받았습니다만, 이번은 인수에 반환값을 대입하고 싶은 변수명을 넣는 것만으로, 데이터를 받을 수 있습니다.data 부분은 원하는 값으로 괜찮습니다.
console.log(data) 로 확인하면, 원하는 값이 대입되고 있는 것을 알 수 있습니다.

.done(function(data) 정보

.done 를 지정하면 같은 방식으로 값을 얻을 수 있습니다.

성공은 done를 사용하고 실패는 fail를 사용하여 조건을 분기할 수 있습니다.

이번에는 이것으로 끝납니다.
다음 번은 axios에서 같은 일을 해보겠습니다.