目次
laravelとajaxで非同期処理をする
今回は更新処理をする 一つだけチェックできるチェックボックス
開発をしながら一つだけ選択できるチェックボックスがあった時にajaxを使ったのでそのロジックを参考に書いていきます。
フロー
- フォームのチェックボックスを選択する
- 選択時に、javascriptでchangeイベントを発火させ、ajaxで値を特定のコントローラに渡す
- コントローラ内で登録または更新処理を行う
- json形式でデータを返す
- ajax側で返ってきたデータを受け取る
ルート定義
Route::get('/blog', [App\Http\Controllers\BlogController::class, 'getTest'])->name('gettest');
Route::post('/blog', [App\Http\Controllers\BlogController::class, 'postTest'])->name('posttest');初期表示
ルート
「Route::get(‘/blog’, [App\Http\Controllers\BlogController::class, ‘getTest’])->name(‘gettest’);」
bladeのscript（test.blade.php）
<h3>フラグAjax</h3>
<form action="" method="POST">
@csrf
{{-- 初期表示用のコントローラからデータを取得してflagが1の場合はchecked状態にする --}}
<input type="checkbox" id="flag" name="flag" value="1" @if ($user_data['flag'] == 1) checked @endif>
<label for="flag">フラグ</label>
</form>
<script>
// id="flag"が切り替わった時
$("#flag").on('change', function() {
// チェック状態のチェックボックスの値を取得し、valueを格納
var flag = $("#flag:checked").val();
// チェックが外された時はundefinedとなるため0を格納
if (flag == undefined) {
flag = 0;
}
// ヘッダー情報（トークン）の設定
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $("[name='csrf-token']").attr("content") },
})
$.ajax({
url: "{{ route('posttest') }}", // ルート情報の設定（送り先）
method: "POST",
dataType: "json",
data: {
flag: flag, // 引数の名前と値を定義
},
success: function (data) { // 成功時の処理
var data = data.data;
},
error: function (xhr, status, error) { // エラー時の処理
alert(error);
},
});
});
</script>Controller
public function getTest(Request $request) {
// 初期処理
$user_id = 1;
// ユーザ情報の取得
$query = users::query();
$query->where('id', '=', $user_id);
$result = $query->first();
$user_data = $result->toArray();
return view('test', [
'user_data' => $user_data
]);
}更新処理
ルート
「Route::post(‘/blog’, [App\Http\Controllers\BlogController::class, ‘postTest’])->name(‘posttest’);」
フォームのチェックボックスにチェンジイベントが発火した時、postTestメソッドが動きます。
public function postTest(Request $request) {
// 初期処理
$user_id = 1;
$flag = $request->input('flag'); // ajax内で定義した引数を取得
// トランザクションの開始
DB::beginTransaction();
try{
$result = users::where('id', '=', $user_id)->first();
$result->flag = $flag;
$result->save(); // 更新
DB::commit();
}catch(Throwable $e){
DB::rollback();
}
header('Content-Type: application/json');
echo json_encode([ // json形式で返す（連装配列で複数のデータを返せます）
'data' => '成功'
]);
exit; // 処理を抜ける
}
