Laravel 8 - 此路由不支持 POST 方法。支持的方法：删除

Question

我试图通过单击输入提交按钮提交表单来从 DataTable 中删除记录，但此错误始终显示：

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException 此路由不支持 POST 方法。支持的方法：DELETE。

这是我当前在 web.php 中声明的路线：

Route::delete('sales/deleteSalesOrder/{id}', 'Transaction\SaleController@deleteSalesOrder')->name('sales/deleteSalesOrder/{id}')->middleware('role:A');

这是我在 DataTable 中创建表单的 sn-p 代码：

public function dataTableTrash()
{
    $data = SalesH::where('active', '=', 2);
    
    return Datatables::of($data)
        ->addColumn('action', function($data){

        $url = url('transaction/sales/'.$data->id);
        $undoTrash = url('sales/undoTrash/'.$data->id);
        $urlDestroy = url('sales/deleteSalesOrder/'.$data->id);

        $view = "<a class = 'btn btn-primary' href = '".$url."' title = 'View'><i class = 'nav icon fas fa-eye'></i></a>";
        $undo = "<button data-url = '".$undoTrash."' onclick = 'undoTrash(this)' class = 'btn btn-action btn-success' title = 'Re-Activate'><i class='fas fa-trash-restore-alt'></i></button>";
        $delete = "<form action='$urlDestroy' class = 'deleteForm' method='post'>
                        <div class='form-group'>
                            <input type='submit' class='btn btn-danger delete-user' value='Delete'>
                        </div>
                    </form>";
                    
        return $view."".$undo."".$delete;

    })->editColumn('date', function($data){
        return date('d-m-Y', strtotime($data->date));
    })->editColumn('total', function($data){
        return number_format($data->total, 0, '.', ',');
    })
    ->rawColumns(['action'])
    ->make(true);
}

您注意到该表单还没有 csrf_field() 和 method_field('DELETE')。我所做的只是在刀片文件中使用 JQuery 添加它。

@push('js')

<script>
  $(document).ready(function() {
     $('.deleteForm').submit(function(event) {
     event.preventDefault();
     console.log('LOL I am working!');
     $(this).append('{{ csrf_field() }}');
     $(this).append('{{ method_field('DELETE') }}');
     if (confirm('Are you sure you want to PERMANENTLY delete this data?')) {
        event.currentTarget.submit();
     });
   }
</script>
@endpush

最后是我的deleteSalesOrder()（删除数据的方法）：

public function deleteSalesOrder($id)
{
     $data = SalesH::find($id);
     $data->delete();

     if($data->save()){
         Toastr::success('Sales Order has been permanently deleted.', 'Success');
         return view('Transaction.Sales.index');
     }else{
         Toastr::error('Sales Order failed to be deleted.', 'Error');
         return view('Transaction.Sales.index');
     }
}

是什么导致了这个错误？仅使用 JQuery 附加 csrf_field() 和 method_field('DELETE') 是否正确？在这种情况下如何解决问题并成功删除数据？

Answer 1

这里的问题是您要附加到一个名为deleteForm 的表单，该表单不存在。您的 from 中没有 name 属性，而是 id 属性。并且每个表单都具有相同的 id，这不会像在 dom 中那样工作，应该只有一个具有 id 的元素。最好使用类属性，并在提交表单时将这些 csrf 和方法字段添加到该表单，而不是在文档中准备好。 表格

<form action='$urlDestroy' class='deleteForm' method='post'>

然后在脚本中

$('.deleteForm').submit(function(event) {
    event.preventDefault();
    $(this).append('{{ csrf_field() }}');
    $(this).append('{{ method_field('DELETE') }}');
    // write confirm code if you want
    event.currentTarget.submit();
});