はじめに
vue.jsでAjax通信を実装しました。
備忘録として残しておきます。
開発環境
開発環境 | バージョン |
---|---|
Laravel | 10.1.5 |
PHP | 8.2.3 |
vue.js | 3.2.47 |
実装内容
AjaxComponent.vue
<template>
<form @submit.prevent="regist">
<div>設定画面</div>
<button type="submit" class="btn btn-primary set-button">Ajax開始する</button>
</form>
</template>
<script>
export default {
data() {
return {
ajaxURL: "通信先URL"
}
},
methods:{
regist:function() {
const data = {
ajaxdata: '渡したい値'
}
axios.post(this.ajaxURL, data)
.then(
response => {
console.log('通知成功です', response);
}).catch(
error => {
console.log('通信失敗です(error情報)', error); }
);
},
}
};
</script>
web.php
Route::any('/home/regist', [App\Http\Controllers\HomeController::class, 'regist'])->name('home.regist');
AjaxController.php
// ... 略
// 設定情報を登録する
public function regist(Request $request){
// 入力された情報を取得する
$postData = $request->all();
// js側に渡したい値を返す
return response()->json("js側に渡したい値");
}
@submit.prevent をつけることで、画面遷移を防ぐことができます。
終わりに
最後までご覧いただきありがとうございます。
ご指摘、ご意見ありましたらよろしくお願いいたします。