javascript - Laravel 删除按钮不适用于 Ajax 调用

Question

我有一个 Laravel 帖子应用程序，我可以在其中创建和显示帖子。我现在正尝试使用 Ajax 调用删除帖子。假设我有 10 个帖子显示。当我单击第一个帖子的删除按钮时，出现了 405 Method Not Allowed 错误。当我点击下面任何帖子的删除按钮时，绝对没有任何反应，没有错误或警告消息。请注意，我的 CSRF token 已设置并正在运行。任何帮助或建议将不胜感激。

这是 HTML:

    @foreach($posts as $post)
    <div class="postContainer" id="post{{ $post->id }}">
      <h4 class="postHeading" id="showtitle">{{ $post->title }}</h4>
      <p class="post" id="postBody">{{ $post->post }}</p>
      <span class="authorName" id="showauthor">{{ $post->author }}</span>
      <span class="postDate" id="showpostDate">{{ $post->created_at }}</span>
      <input type="submit" name="delete" id="delete" value="Delete" data-id="{{ $post->id }}">
    </div>
    @endforeach
    <div class="message" id="message">

    </div>

这是我的 Ajax 调用:

    $("#delete").on("click", function(){

      var id = $(this).attr('data-id');

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

      $.ajax({
        url: '/index/delete/' + id,
        type: "POST",
        data: {_method: 'delete'},
        success:function(response){
          $("#message").append("<div>" + response.message + "</div>");
        },
      });

    });

这是我的路线:

   Route::post('/index/delete/{id}', 'HomeController@delete');

这是我的 Controller :

public function delete($id){
  Post::find($id)->delete();
  return redirect('/');
}

Answer 1

在你的代码中改变它

id to class

<input type="submit" name="delete" class="delete" value="Delete" data-id="{{ $post->id }}">

在脚本中

调用 class(.) 而不是 id(#)

和data('id')不是attr('data-id')

$(".delete").on("click", function(){
    var id = $(this).data('id');