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