Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Laravel / jQuery] 非同期(Ajax)でレコードを削除したい

やりたいこと

Laravel学習帳さんのサイトを参考にLaravelで基本的なCRUDアプリを作成中。
ユーザーを非同期で削除する機能を実装したときにハマった点を備忘録としてメモ。

キャプチャ.PNG

↑こんな感じでユーザーの登録や編集、削除ができるアプリです。
今回は <a> タグで作られた削除ボタンを押すと、非同期でユーザーが削除される機能を実装します。

環境

CentOS: 7.4
PHP: 7.2
Laravel: 5.6
jQuery: 3.3.1

実装時に問題になった点

  • Ajax を使うとき GET、POST 以外の HTTP リクエストはどうやって送信するの?
  • Ajax で CSRF 対策(トークンを送信)するにはどうすればいいの?

うまくいったコード

最終的に下記のコードでうまくいきました。
確認用ポップアップが出して、OK の場合はユーザーを削除する処理を記述しています。

delete_user.js
$(function() {
  $('#deleteTarget').on('click', function() {
    var deleteConfirm = confirm('削除してよろしいでしょうか?');

    if(deleteConfirm == true) {
      var clickEle = $(this)
      // 削除ボタンにユーザーIDをカスタムデータとして埋め込んでます。
      var userID = clickEle.attr('data-user-id');

      $.ajax({
        url: '/user/' + userID,
        type: 'POST',
        data: {'id': userID,
               '_method': 'DELETE'} // DELETE リクエストだよ!と教えてあげる。
      })

     .done(function() {
        // 通信が成功した場合、クリックした要素の親要素の <tr> を削除
        clickEle.parents('tr').remove();
      })

     .fail(function() {
        alert('エラー');
      });

    } else {
      (function(e) {
        e.preventDefault()
      });
    };
  });
});

2つのつまずきポイント

メソッドの指定

今回はユーザーを削除したいのだが、送信できるリクエストは GET か POST のみ。
そこで、Ajax で送るデータの中に '_method': 'DELETE' を追記してリクエストを指定する。

CSRF 対策

CSRF 対策ができていないと Laravel さんに怒られてしまいます。
HTTP の ヘッダーにトークンを埋め込んでおき(今回は <meta> タグの中)、常にトークンを送るよう $.ajaxSetup に設定しました。

<meta name="token" content="{{ csrf_token() }}">
$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
  }
});

これを書いておけば Ajax で POST するとき、常にトークンを送ってくれます。
ここはこちらのサイトを参考にしました。

最後にコントローラーで削除処理!

UserController.php
public function destroy(Request $request, User $user) {
    $user = User::findOrFail($request->id);
    $user->delete();
}

とりあえずこれで思ったとおりに動いてくれました。
以上です。

u-dai
元営業マン。2018年よりエンジニアへと転職。学んだことをメモしていきたいと思います。
creema
全国のつくり手とつかい手が Web 上で直接作品を売買できる、日本最大級のハンドメイドマーケットプレイス「Creema」の企画、開発、運営するスタートアップです。「本当にいいものが埋もれてしまうことのない、フェアで大規模な新しい経済圏をつくろう」を合言葉に、メンバー一丸となって、たのしくストイックに活動を行っています。
https://www.creema.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away