laravel でjavascriptのfetchAPIをつかってajax処理（delete処理）をしようと試みてますがエラーがでます。

Question

laravel でjavascriptのfetchAPIをつかってajax処理をしようと試みています。
具体的には☓じるしを押すとタイトルが消えるようにしたいと考えています。

バツじるしを押すと以下のエラーが出ます。しかしテーブルからレコードが削除されません。

POST http://localhost:8573/posts/7/destroy 405 (Method Not Allowed)

(追記です）
ajaxを使用せずにdelete処理を行うときには
{{ route('posts.destroy', $post) }}のように$post(ORMであるeloquent)をおくっているので、ajaxの場合も同じく$postを送るひつようがあるのかなと思いました。しかしいろいろと調べているのですが、どうすればlaravelのmodelのオブジェクトをjavascriptに変数として渡せばよいのかわかりません。

以下画像です。

以下ソースコードです。

    <ul>
        @forelse ($posts as $post)
            <li>
                <div class="title-container">
                    <form method="post" action="{{ route('posts.checked', $post) }}">
                        @method('PATCH')
                        @csrf
                        <input type="checkbox"  {{ $post->is_done ? 'checked' : ''; }}>
                    </form>
                    <a href="{{ route('posts.show', $post) }}" class="{{ $post->is_done ? 'done' : ''; }}">
                        <span>{{ $post->title }}</span>
                    </a>
                </div>

                {{-- ajax 用のdeleteボタン--}}
                <span class="delete" data-id="{{ $post->id }}">「x」</span>
            </li>
        @empty
            <li>No posts yet!</li>
        @endforelse
    </ul>

    <script>

        const deletes = document.querySelectorAll('.delete');
        deletes.forEach(span => {
            const postid = span.dataset.id;
            span.addEventListener('click', () => {

                fetch('/posts/'+ postid + '/destroy', {
                    method: 'POST',
                });

                span.parentNode.remove();
            })

        });
    </script>

<?php

namespace App\Http\Controllers;


use Illuminate\Http\Request;
use App\Models\Post;
use App\Http\Requests\PostRequest;

class PostController extends Controller
{

    public function index()
    {
        $posts = Post::latest()->get();

        return view('index')
            ->with(['posts' => $posts]);
    }

    public function show(Post $post)
    {
        return view('posts.show')
            ->with(['post' => $post]);
    }

    public function destroy(Post $post)
    {
        $post->delete();

        return redirect()
            ->route('posts.index');
    }

Route::get('/', [PostController::class, 'index'])
    ->name('posts.index');

Route::get('/posts/{post}', [PostController::class, 'show'])
    ->name('posts.show')
    ->where('post', '[0-9]+');

Route::delete('/posts/{post}/destroy', [PostController::class, 'destroy'])
    ->name('posts.destroy')
    ->where('post', '[0-9]+');

今回の質問とあまり関係ないコードは省略しています。

https://laraweb.net/tutorial/10817/
こちらの方のサイトを拝見したのですが、自分の今の方針とは書き方が異なっていているので
今の僕の書き方でうまく動作させたいと思っています。

LInuxのdockerで開発しています。
よろしくおねがいいたします。

Answer 1

基本ができてないのに先のことやろうとするから間違える。
まずは普通のformでの削除から。

<form method="post" action="">
    @method('DELETE')
    @csrf

</form>

• ルーティングとformのmethodを合わせる。formの段階でここを間違えてる質問が大量。最初に覚える基本。
• ブラウザのformはgetとpostしかできないのでそれ以外は@methodを使う、はLaravelの知識
• GET,POST,DELETEとは何かはLaravel使う前に身に付けておく知識
• JSは直接deleteが使える
• formでもJSでも送信しているリクエストはほとんど同じ。どんなリクエストが送信されているかを理解してないとJSで書き換えられない。

Comments

[tou.23.bc]

ありがとうございます。
methodをdeleteにしてかつcsrfの記述が必要だったみたいです。
ベストアンサーとさせていただきます。

[tou.23.bc]

ありがとうございました。

Answer 2

                fetch('/posts/'+ postid + '/destroy', {
                    method: 'POST',
                });

POST 指定してるけど、

Route::delete('/posts/{post}/destroy', [PostController::class, 'destroy'])
    ->name('posts.destroy')
    ->where('post', '[0-9]+');

ご自身で、DELETE を指定してるじゃない。

Comments

[tou.23.bc]

ご回答いただきありがとうございます。ごしてきの通りpost,deleteのそれぞれに統一してためしましたがうまくいきませんでした。

[phper.k]

まずは通しでリファレンス読んでください。
ロシアンルーレットにたいに当てずっぽうな対処しても時間の無駄です。

[phper.k]

メソッドを統一した時でもうまくは行かないが、エラーメッセージは変わっているはず。
そこに気づいていないのはまずい

[tou.23.bc]

りょうかいしました。ありがとうございます。