Laravel提交删除表格与新闻的href

Question

我有一个表在Laravel 5.4显示新闻有一个删除选项。 代码如下： news.blade.php：

@foreach($news as $article) 
    <tr class="text-center"> 
     <td>{{ $article->title }}</td> 
     <td>{{ $article->created_at }}</td> 
     <td>{{ $article->views }}</td> 
     <td> 
      <a class="btn btn-primary btn-flat" href="#"> 
      <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 
      </a> 
     </td> 
     <td> 
      <a class="btn btn-warning btn-flat" href="#" onclick="event.preventDefault(); document.getElementById('delete-form').submit();"> 
       <i class="fa fa-lg fa-trash"></i> 
      </a> 

      <form action="{{ route('delete-article') }}" method="POST" id="delete-form" style="display: none;"> 
       {{csrf_field()}} 
       <input type="hidden" value="{{ $article->id }}" name="id"> 
      </form> 
     </td> 
    </tr> 
@endforeach 

我的问题是我怎么告诉的JavaScript提交正是形式，是旁边的A HREF，因为现在这将提交该ID，这并不总是在同一个TD的点击A HREF

编辑相匹配的第一种形式： 我知道我可以尝试访问与jQuery的点击的HREF的父母，然后访问它的子窗体或使用jquery的关闭功能，但我正在寻找更稳定的东西。

Answer 1

之前做任何事情，你的路线应该是（如果它尚未完成）：
Route::delete(...)->name('delete-article');

我认为你可以做这样的事情：

<a class="btn btn-warning btn-flat" href="#" onclick="event.preventDefault(); document.getElementById('delete-form-{{ $article->id }}').submit();"> 
     <i class="fa fa-lg fa-trash"></i> 
    </a> 

    <form action="{{ route('delete-article') }}" method="POST" id="delete-form-{{ $article->id }}" style="display: none;"> 
     {{csrf_field()}} 
     {{ method_field('DELETE') }} 
     <input type="hidden" value="{{ $article->id }}" name="id"> 
    </form> 

或者使用Ajax

@foreach($news as $article) 
    <tr class="text-center"> 
     <td>{{ $article->title }}</td> 
     <td>{{ $article->created_at }}</td> 
     <td>{{ $article->views }}</td> 
     <td> 
      <a class="btn btn-primary btn-flat" href="#"> 
      <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 
      </a> 
     </td> 
     <td> 
      <a class="btn btn-warning btn-flat" href="#" onclick="callAjax({{ $article->id }})"> 
       <i class="fa fa-lg fa-trash"></i> 
      </a> 
     </td> 
    </tr> 
@endforeach 

<script> 
function callAjax(articleId) { 
    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
     } 
    }) 

    $.ajax({ 
     type: 'POST', 
     url: '{{ route('delete-article') }}', 
     data: {_method: 'DELETE', id: articleId} 
    }) 
    .done(function (data) { 
     // DO SOMETHING OR NOT 
    }).error(function (err) { 
     // DO SOMETHING OR NOT 
    }); 
} 

</script> 

您必须在文档头中指定<meta name="csrf-token" content="{{ csrf_token() }}">。 （https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token）

Answer 2

Benjamin Brasseur为您提供了一种使用AJAX实现的方法。 （我不认为这是“棘手”的方式）

但是，与您当前的JavaScript，你似乎只提交一个隐藏的窗体。你为什么不使用真正的形式？

<td> 
    <form action="{{ route('delete-article') }}" method="POST"> 
     {{ csrf_field() }} 

     <input type="hidden" value="{{ $article->id }}" name="id" /> 

     <button type="submit" class="btn btn-warning btn-flat"> 
      <i class="fa fa-lg fa-trash"></i> 
     </button> 
    </form> 
</td> 

如果视觉不一样，调整<form>的风格（使其inline-block的或东西）和<button>来搭配你的旧<a>。

Answer 3

HTML

<tr id="parent-{{ $article->id }}"> 
    <td>{{ $article->title }}</td> 
    <td>{{ $article->created_at }}</td> 
    <td>{{ $article->views }}</td> 
    <td> 
    <a href="{{ route('route', $article->id) }}" id="{{ $article->id }}" data-method="DELETE" class="delete-btn"><i class="fa fa-fw fa-remove"></i></a> 
    </td> 
</tr> 

添加在你的脑袋：

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

我的脚本只是在同一个文件，我的刀片tempate JS

<script> 
    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
     } 
    }); 
    $(document).on('click', '.delete-btn', function(e) { 
     var $this = $(this), 
      $id = $(this).attr('id'); 

     if (confirm('Are you sure you want to delete this post?')) { 
      $.post({ 
       type: $this.data('method'), 
       url: $this.attr('href') 
      }).done(function (data) { 
       $('#parent-' + $id).slideUp(300, function() { 
        $(this).remove(); 
       }); 
      }).fail(function (data) { 
       console.log(data); 
      }); 
     } 

     e.preventDefault(); 
    }); 
    </script> 

在您的控制器

public function destroy($id) 
{ 
     Article::find($id)->delete(); 

     return response()->json(['success' => 'Article ID: ' . $id . ' has been deleted']); 
} 

您的路线：

Route::delete('/delete/{post}', 'Controller@destroy')->name('delete');