Railsの非同期通信でDELETEを行う

はじめに

自作アプリ「CheckMe!」はユーザビリティ向上を目指してDBとのやりとりに非同期通信を多く使っています。
CRUDを非同期でやっていますが、Deleteについて結構つまづくポイントがあったので備忘録を兼ねてまとめておきます。
この記事が同じことをやりたい人の手助けになれば幸いです。

条件

削除対象のidが含まれたリンク(クラスに’delete_link’を持つ）をクリックした時にイベントを中止して
idのアイテムを削除する非同期通信をする。

実装

$('.delete_link').on('click', function (e) {

    // stopPropagationがないとHTMLとJSONの
    // リクエストが同時に送られてしまう
    e.preventDefault();
    e.stopPropagation();

    //リンクに含まれるURLを取得する
    var url = $(this).attr('href');

    $.ajax({
      url: url,
      type: "DELETE",
      dataType: 'json',
      // CSRF tokenを発行する
      beforeSend: function (xhr) { xhr.setRequestHeader("X-CSRF-Token", $('meta[name="csrf-token"]').attr('content')) }
    })
      .done(function (data) {
        成功した時
      })
      .fail(function () {
        失敗した時
      })
})

ポイント

stopPropagationを使うこと

preventDefaultだけだと、なぜかリクエストを送った際にHTMLとJSONのリクエストが
同時に送られてしまう。結果、２回異なるリクエストで非同期通信したことになってしまうので
stopPropagationを使う。

CSRF tokenを発行する

CSRF tokenが無いと認証が通らず、そこで処理が止まってしまうのでtokenを渡すよう
にしてあげます。