Laravel 删除按钮不适用于 Ajax 调用答案

【问题标题】：Laravel Delete button not working with Ajax callLaravel 删除按钮不适用于 Ajax 调用
【发布时间】：2018-01-16 14:50:51
【问题描述】：

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

这是 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');

这是我的控制器：

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

【问题讨论】：

Id 总是唯一的...
将type: "POST", 设置为type: "GET", 并检查
仅供参考，最好使用.data('id') 而不是.attr('data-id')

标签： javascript php jquery ajax laravel

【解决方案1】：

在你的代码中改变这个

id 到班级

<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');

【讨论】：

谢谢，现在已经解决了。唯一的问题是 - 我不明白为什么必须使用类而不是 id？我使用了 Ajax 调用来插入数据，并且使用了 id，它可以 100% 工作。你能解释一下吗？再次感谢您。
ID 是任何对象的标识。如果您为多个元素提供相同的 ID，那么对于每个新对象或元素，该 ID 必须是唯一的，然后分配给该元素的 ID 首先出现。 id 属性为 HTML 元素指定一个唯一的 id（该值在 HTML 文档中必须是唯一的）。 id 属性最常用于指向样式表中的样式，并通过 JavaScript（通过 HTML DOM）来操作具有特定 id 的元素。 Link
然而我的 id "delete" 是独一无二的......仍然不明白为什么要使用 class。
你在 foreach 循环中使用它。这个 make 是重复的......对于每次迭代......
哦，我明白了！现在我明白了。谢谢:)

【解决方案2】：

对不起，我没有评论的声誉，所以我将其发布为答案。是的，您必须更改您的 javascript，因为 ID 是唯一的，您只能将其提供给一个输入并通过它调用一个输入。在你的 routes/web.php 我会做 Route::post('/index/delete/{post}', 'HomeController@delete')->name('posts_delete'); name 对于命名路由是可选的，但它通常会有所帮助（对于命名路由，您可以为 ajax 中的 url 执行 {{ route('posts_delete') }} 但您必须将 id 添加为数据所以在你的 HomeController 中你可以做

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

别忘了use App\Post;

另外我会推荐一个处理帖子的 PostController php artisan make:controller PostsController --resource 使用destroy 之类的方法创建一个Controller

【讨论】：