制作環境
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.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】 各記述方法 ～jQuery編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × 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編～
今回作成するもの
axiosを利用し非同期通信を行い、自動で仕入れ先が入力される機能を実装します。
以下作成条件
- 基本的な記述にはjQueryを使用し通信にはaxiosを使用します。
- 数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
- 検索するのにクリック操作を必要としません。
inputに入力されたら検索します。 - スクリプトの読み込みには
Laravel-mixを使用します。 - 前回作成した
test.jsを編集して使用するで、必要ならtest4.js等コピーを作成してバックアップしてください。
スクリプトの作成
resorces>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
確認
その他の内容は前回と変わらないので、ここまでできたら動作を確認してください。
以上です。
次回に続きます。