제작 환경

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.비동기 통신(Ajax) [JavaScript] [jQuery] [axios] [Vue.js] 각 기술 방법~ 사전 준비 편~
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.비동기 통신(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를 사용합니다.

4자리 숫자를 입력하면 공급업체가 자동으로 검색하여 반영합니다.

검색은 클릭 조작이 필요 없습니다.input를 입력하여 검색합니다.

를 사용하여 자바스크립트를 읽습니다.

그림 완성

스크립트 만들기

Laravel-mix 내에 새로 만들기resources>js는 다음과 같다.
test.js

// DOM 構築後に実行したい関数の呼び出し
window.onload = function() {

    // inputのid="code"(業者コード)の要素を取得し、inputイベントを監視します
    // 業者コードに値が入力されたら以下の内容を実行します
    document.getElementById('code').addEventListener('input', function() {

        // 入力された値を変数traderCodeに代入します
        let traderCode = document.getElementById('code').value;

        // 入力された値が4桁未満の時は検索させないようにします
        if (traderCode.length < 4) {
            return;
        }

        // XMLHttpRequest オブジェクトを作成します
        let xhr = new XMLHttpRequest();

        // 非同期通信でアクセスするURLを作成しurlに代入します
        let url = '/form_search?trader_code=' + traderCode;

        // open('アクセスの方法', 'アクセス先')
        // アクセス方法は GETやPOSTです
        // アクセス先は作成したurlです
        xhr.open('GET', url);
        // 通信を開始します
        xhr.send();

        // 通信状態が変化した時に発火するイベントを設定します
        xhr.onreadystatechange = function() {
            // 通信状態の確認を行い、エラーがなければ後の処理を実行します
            if (xhr.readyState === 4 && xhr.status === 200) {

                // コントローラから受け取るデータ(検索結果)の文字列を JSON として解析し
                // dataに代入します
                // responseTextでデータを受け取れます
                let data = JSON.parse(xhr.responseText);

                // 受け取ったデータ(検索結果)を仕入れ先のvalueに反映します
                document.getElementById('supplier').value = data[0].trader_name;

            }
        }
    })
}

readyState 및 status 정보

test.js 통신 상태를 확인할 수 있습니다.readyState의 값은 다음과 같다.
값
컨디션
컨텐트
0
준비 단계
아직 통신 상태가 아닙니다.
2
통신 시작
서버와 통신을 시작한 상태
3
받는 중
서버에서 데이터를 가져오는 상태
4
통신 완료
데이터 검색 및 통신 종료 상태
확인readyState을 통해 통신 중 발생한 오류를 처리할 수 있습니다.status의 주요치는 다음과 같다.
값
컨디션
컨텐트
200
성취
원활한 통신 성공 상태
401
잘못
인증 필요 통신이 불가능한 상태
403
잘못
통신 불가 상태에 대한 액세스 차단
404
잘못
정보가 존재하지 않아 통신할 수 없는 상태
500
잘못
서버 측의 일부 고장으로 인해 통신이 불가능한 상태
503
잘못
서버 부하로 통신할 수 없는 상태

app.js에 등록

status에서 생성된 Laravel-mix는 읽을 수 있습니다.test.js내의 resources>js를 열고 app.js의 아래에 다음과 같은 기술을 보충한다.
app.js

require('./test');

webpack.mix.js 수정

require('./bootstrap'); 를 연 후 다음과 같이 수정합니다.
수정 전
webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

수정 후
webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version();

이전 캐시를 읽지 않기 위해서 이 수정이 진행 중입니다.

편역하다

터미널을 시작하고 다음 동작을 실행하십시오.
※node.js가 필요합니다.설치하지 않은 사람은 설치하십시오.
node.js
https://nodejs.org/ja/

npm run dev

편집 컨트롤러

마지막으로 작성된 FormControllerphp를 열면 다음과 같은 방법을 보충해 주십시오.
FormController.php

public function get_trader(Request $request)
{
    // リクエストパラメータからtrader_codeを取得し$traderCodeに代入します
    // リクエストパラメータはURLで送られてくる値です
    // /form_search?trader_code=●● この●●の部分を取得してます
    $traderCode = $request->trader_code;

    // traderテーブルから、trader_codeが業者コードに入力された値と同じものを抽出し
    // $traderTableに代入します
    $traderTable = Trader::where('trader_code', '=', $traderCode)->get();

    // $traderTableを返します(これでtest.jsのresponseTextにデータが渡されます)
    return $traderTable;
}

라우팅 편집

webpack.mix.js내routes를 열고 다음과 같은 내용을 보충한다.
web.php

Route::get('/form_search', 'FormController@get_trader')->name('ajax');

확인

공장 코드를 입력하여 공급업체가 반영되었는지 확인하세요.
업자 코드와 업자 이름이 미리 등록되지 않으면 반영되지 않으니 주의하세요.

이미지 검색

입력한 값이 4자리이면 읽어들이고 반영됩니다.

JavaScript 편은 여기서 끝냅니다.
수고하셨습니다.