Laravelで削除の非同期処理を実装する条件

jQueryを動かすためのCDN
POST通信をするためのトークン【とても重要】
HTMLタグから情報を取得するカスタムデータ属性
コントローラへ非同期通信するためのAjax
コントローラーへ移動するルーティング
データを受取りレコードを削除するコントローラー

以下の説明では、非同期で削除するコード以外は省いています。

jQueryを動かすためのCDN

非同期処理（ajax通信)を実装するためにはjQueryの$.ajaxメソッドが必要です
そのためjQueryを動かすためにCDNをHTMLのheadタグに記述します

app.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title')</title>

    <!--Bootstrap CSS -->
    {{--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">--}}
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body class="d-flex flex-column">

<!-- ヘッダー -->
@include('layouts.header')

<!-- コンテンツ -->
@yield('content')



</body>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>

CDNのリンク記述場所に注意

CDNのリンクは、jQueryの処理コード部分よりも
前に記述する必要があります。
後に記述された場合、jQueryが利用できません。
そのため、HTMLのheadタグ内部に記述することが推奨されます。

CDNでの導入方法

https://code.jquery.com にアクセスし
jQuery Core 3.*.*のminifiedをクリック
表示されたscriptのコードをコピーしHTMLへ貼り付けします

POST通信をするためのトークン【とても重要】

LaravelでPOST通信をするには必ずトークンを送るための記述が必要です
Laravelの仕様でトークンを送らなければエラーが発生し、
通信が失敗、つまりエラーが発生します。

ajaxでトークンを送信する方法とは？

ajaxのコードを処理を記述するscriptタグへ
非同期処理とセットで以下の記述をすることにより
トークンが送信されます

index.blade.php

<script>

// ここからトークン送信処理
$.ajaxSetup({
    headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

//ここから非同期処理の記述

// $(function() {
//     $.ajax({
//                  type: 'POST'
//                      , url: '/destroy/'+userID
//                      , dataType: 'json'
//                      , data: {'id':userID},

ajaxの場合はページを更新しないためエラーコードが出ず
問題には非常に気が付きにくいことが挙げられます

HTMLタグから情報を取得するカスタムデータ属性

削除の対象になるHTMLタグにカスタムデータ属性で

jQuery側にてHTMLの値を取得することができます

カスタムデータ属性とは？

htmlタグに付与できるclass属性やid属性などと同じ利用方法の属性で
かつ、オリジナルの名前で設定できる属性です

カスタムデータ属性は、data-***で作成します。
***の部分を任意の文字列で設定できます。
他の要素名（class名、ID名など）とは重複できません。

index.blade.php

 <form  class="id">
        <input data-user_id="{{$user->id}}" type="submit" class="btn-dell" value="削除">
 </form>

削除したいレコードの"ID"をjQueryへ渡すには？

まずはMVCの流れで
コントローラーでモデル（データベース）の情報を取得します

前提条件

Laravelのプロジェクトへすでにモデル、コントローラー、ビューファイルが存在する
プロジェクトとMySQLなどはすでに紐付けの設定がされている

User.php


<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Users extends Model
{
    
}

HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Users;
use Illuminate\Support\Facades\DB;

class HomeController extends Controller
{
     
    public function index(Request $request)
    {
             
        /* テーブルから全てのレコードを取得する */
        $users = Users::query();
        
         /* ページネーション */
        /* レコード数が多い時にページを分割して表示します(今回は5レコードごとにページを分けます） */
        /* 分割の必要がなければ省略しても問題ありません */
        $posts = $users->paginate(5);

        return view('crud.index', ['posts' => $posts]);
        /* ページネーションが必要なければ、postsはusersに置き換えます */
    }

}

index.blade.php


@extends('layouts.app')

@section('content')

<div class="wrapper mx-auto" style="padding-top:30px;">



<!--テーブル-->

      <div class="table-responsive">
          <table class="table" style="width: 1000px; max-width: 0 auto;">
                <tr class="table-info">
                <th scope="col" >id</th>
                <th scope="col" >名前</th>
             
                  <th scope="col" >削除</th>
                </tr>

<!--繰り返し処理-->
<!--1レコードずつ情報を表示します-->
 @foreach($posts as $user)  
<tr>
 
         <td>{{$user->id}}</td>
         <td>{{$user->name}}</td>

<!-- blade.php内で変数を利用するためには前後を　{{ }} で囲む必要があります　-->　　　　　　　　　　　　

<!--削除に必要なボタン要素-->
  <td>  
    <form  class="id">
        <input data-user_id="{{$companie->id}}" type="submit" class="btn btn-danger btn-dell" value="削除">
      </form>
  </td>

</tr>
@endforeach

         </table>
       </div>
    <!--ページネーションを表示する変数-->
       {{ $posts->links() }}

    </div>

コントローラへ非同期通信するためのAjax

index.blade.php


<script type="text/javascript">

// トークンを送信する記述
// Laravelでは通信をする際にトークンを送らなければ仕様でエラーが発生する
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
});


// ここから非同期処理の記述
$(function() {
                
 //削除ボタンに"btn-danger"クラスを設定しているため、ボタンが押された場合に開始されます
              $('.btn-danger').on('click', function() {
                var deleteConfirm = confirm('削除してよろしいでしょうか？');
//　メッセージをOKした時（true)の場合、次に進みます 
                    if(deleteConfirm == true) {
                      var clickEle = $(this)
//$(this)は自身（今回は押されたボタンのinputタグ)を参照します
//　"clickEle"に対して、inputタグの設定が全て代入されます

                      var userID = clickEle.attr('data-user_id');
 //attr()」は、HTML要素の属性を取得したり設定することができるメソッドです
 //今回はinputタグの"data-user_id"という属性の値を取得します
 //"data-user_id"にはレコードの"id"が設定されているので
 // 削除するレコードを指定するためのidの値をここで取得します

 // .ajaxメソッドでルーティングを通じて、コントローラへ非同期通信を行います。
//見本ではレコードを削除するコントローラへ通信を送るためにはweb.phpを参照すると
//通信方法は"post"に設定し、URL（送信先）を'/destroy/{id}'にする必要があります
                         
              $.ajax({
                 type: 'POST',
                 url: '/destroy/'+userID, //userID にはレコードのIDが代入されています
                 dataType: 'json',
                 data: {'id':userID},
                          })
//”削除しても良いですか”のメッセージで”いいえ”を選択すると次に進み処理がキャンセルされます
            } else {
                    (function(e) {
                      e.preventDefault()
                    });
            };
      });
});
//.ajaxメソッドではオプション（引数）を設定することで送信先（URL)や送信する変数を指定できます
//type は　通信方式をGETもしくはPOSTから選択できます（デフォルトはGETです）
//urlは送信先（URL)を指定します。ルーティングで設定しているURLになるよう文字列と変数を記述します
//dataType はjavascriptからこれから送るデータの種類は何であるかを示します
//json とは "JavaScript Object Notationの略"
//json は javascriptのほかphpや多数の言語でも読み取れるフォーマットなので設定しておけばエラーが出ません

//data はURL先（コントローラー）に渡す値です。今回は削除したいレコードの”id”を渡します。
//dataの書き方は   
//data:{'コントローラーのアクションで使う引数':jQueryから渡す変数}になります
</script>

コントローラーへ移動するルーティング

ajaxで指定するURLはルーティングを参照します。
レコードを削除するコントローラーのアクションにつながるURLは
postの/destroy/{id}となっているため、ajaxメソッドでの送信先は
/destroy/ + （idの値が代入されている）変数となります

web.php


Auth::routes();

Route::get('/', 'HomeController@index')->name('crud.index'); /* 一覧表示 */

Route::post('/destroy/{id}', 'HomeController@destroy'); /* レコード削除 */

データを受取りレコードを削除するコントローラー

HomeController.php

public function destroy(Request $request, Users $users) {

//ajaxメソッドから送信されたデータは$requestに格納されます
//ajas側で送信したデータの名前は"id"という名前に設定しているため
//コントローラーで使うには $request->id で出力します
     
            $users = Users::findOrFail($request->id);
//データベースのUsersテーブルから()で指定されたiDのレコードを代入します
            $users->delete();
//usersに代入されているレコード（行）を削除します

    }