【Laravel】LaravelでAjax（jQuery）を使用する

LaravelでjQueryによるAjax通信を行うための手順をメモします。

環境:Laravel Framework 5.8、 jQuery 3.3.1

1. ルーティングの作成
クライアントからAjax通信先となるコントローラーへのルーティングをroutes/web.phpへ作成する。

routes/web.php
（ルーティングの種類をajaxのHTTPメソッドに合わせる）

Route::get('/delete/{file}', 'DeleteController@execute');

2. Ajax関数を記述
（public/jsディレクトリ内のJavaScriptファイル）

var id = $('div.item').data('id');

$.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },    
    url: '/delete/' + id,
    type: 'GET',
    id: id,
    success: function(){
      //通信が成功した場合の処理
    },
    error: function(){
      //通信が失敗した場合の処理
    }
});

（クライアント側）

<head>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  ~
  ~
</head>

@foreach($files as $file)
  <div class="item" data-id="{{ $file->id }}">
  ~
  </div>
  ~
  ~
@endforeach

CSRF対策としてheaders（リクエストヘッダ）へトークンを指定。
指定するトークンはクライアント側のhead内、meta要素へ埋め込んで用意しておく。

type: ‘POST’とした場合こちらを行わないと※エラー「419 (unknown status)」が発生します。
※ブラウザのコンソールにエラーメッセージが出力される。

urlパスへ、値（id）をバインドしコントローラーのメソッドの引数に渡せるようにしている。

3.（通信先）app/Http/Controllers/DeleteController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\file;

class DeleteController extends Controller
{
    public function execute(File $file){

        //処理
    }
}

参考:
Laravel 5.0 HTTPルーティング
 Laravel 5.5 CSRF保護

Follow me!