LaravelでAjaxを使う方法。サーバにPOSTしてResponseを返す

LaravelでAjax非同期通信を使う方法をユーザ削除する処理を例に紹介します。

流れとしては以下のようになります。

  1. JavaScriptで削除対象のユーザIDを取得
  2. Ajaxでサーバ(コントローラ)にユーザIDを送信
  3. コントローラからサービスを呼び出し、サービスでユーザ削除処理実行
  4. サービスで削除処理した実行結果をコントローラに渡す
  5. 受け取った実行結果をコントローラからjson形式でviewに返す

実行環境

  • PHP: 7.2
  • Laravel: 5.7
  • jQuery: 3.3.1

CSRFの対策処理

POSTする場合は、CSRF対策をする必要があります。ヘッダーにCSRFトークンを追加しましょう。

JavaScript(jQuery)の処理

削除ボタンの連続クリックを防ぐには、以下のように2重送信防止処理をを削除ボタン押下後に書き、削除処理実行後にボタン解除の処理を書くと良いでしょう。

コントローラの処理

削除処理自体はサービスで行っているため、コンストラクタでサービスのインスタンスを生成します。

削除処理の実行結果を受け取り、削除が成功したか失敗したかでHTTPステータスを変えています。

・UsersController.php

サービスの処理

getDeleteMessage()メソッドはコントローラで、削除処理実行結果のメッセージを受け取れるようにしています。

一度削除対象のユーザIDから行ロック(削除済みの場合でも)を行い、ユーザが存在しない場合または削除されていた場合、例外を投げています。softDeleteを使用していない場合は、withTrashed()メソッドは必要ないです。

手っ取り早く削除対象あるかどうか判断する場合はfindOrFail()メソッドを使うと良いでしょう。

・DeleteService.php

ルーティング

・web.php

ルーティングはresourceルートを使用していますが、削除のみのルーティングの場合は以下でも使えます。

 

以上、 LaravelでAjax非同期通信を使う方法でした。削除以外にも色々使えますね。