LARAVEL-无法使用Route::资源生成破坏路由

Question

上下文我在Laravel8中工作，我使用DataTables插件来显示数据库中的记录。正如您将在代码中看到的，我使用Route:：resource（'animal'，'AnimalController'）创建了所有要执行CRUD的路由。这将为销毁方法生成如下路径：animal/{id}

问题。当我按下特定记录的删除按钮时，记录会被删除，没关系，但是浏览器控制台会返回这个错误：“此路由不支持DELETE方法。支持的方法： GET、HEAD、POST"，因此Javascript被破坏，记录被删除的警报永远不会显示。如果我将请求类型更改为POST而不是DELETE，则错误告诉我不支持POST，而DELETE是！

问题：我做错了什么？

路线

Route::resource('animal', 'AnimalController');

控制器来打印数据表

public function index(Request $request)
{
    if($request->ajax()) {
        $animals = DB::select('CALL sp_select_animal()');
        return DataTables::of($animals)
            ->addIndexColumn()
            ->addColumn('action', function($animals){
                $actions  = '<a href="" class="btn btn-info btn-sm">Edit</a>';
                $actions .= '<button type="button" id="'.$animals->id.'" data-name="'.$animals->name.'" name="delete" class="btn btn-danger btn-sm ml-1 delete">Delete</button>';
                return $actions;
            })
            ->rawColumns(['action'])
            ->make(true);
    }
    return view('animal.index');
}

删除记录的控制器

public function destroy($id)
{
    $animal = DB::select('CALL sp_destroy_animal(?)', [$id]);
    return back();
}

看法

jQuery('#BTNdelete').click(function(e){
    e.preventDefault();
    var url = '{{ route("animal.destroy", ":xxx") }}';
    url = url.replace(':xxx', animalID);
    jQuery.ajax({
        "url": url,
        "type": 'DELETE',
        "data": {
            "_token": "{{ csrf_token() }}"
        },
        success: function(data) {
            setTimeout(function() {
                jQuery('#modal').modal('hide');
                toastr.warning('The record was successfully deleted', 'Delete Record', {timeOut:3000});
                jQuery('#tableAnimal').DataTable().ajax.reload();
            }, 100);
        }
    });
});

现在一切正常，如果我创建一个特定的路由来删除记录，例如

Route::get('animal/delete/{id}', [AnimalController::class, 'destroy'])->name('animal.destroy')

这将解决问题。但是我不想创建一个额外的路线。我想使用通过使用资源（）方法生成的路由。

Answer 1

JavaScript中存在很多问题，但问题的根源在于浏览器无法发出删除请求，因此必须伪造这些请求。

// bind to the class of the button, not a non-existent ID
jQuery('button.delete').click(function(e) {
    // this isn't really needed, a button has no default action
    e.preventDefault();
    // you do want to stop the event from bubbling though
    e.stopPropagation();
    // this properly escapes the value for JavaScript, not HTML
    var url = @json(route("animal.destroy", ":xxx"));
    // WHAT IS animalID ???
    url = url.replace(':xxx', animalID);
    // build the post request with the fake method added
    jQuery.post(
        url,
        {_token: @json(csrf_token()), _method: "DELETE"},
        function(data) {
            setTimeout(function() {
                jQuery('#modal').modal('hide');
                toastr.warning('The record was successfully deleted', 'Delete Record', {timeOut:3000});
                jQuery('#tableAnimal').DataTable().ajax.reload();
            }, 100);
        }
    );
});

但必须指出的是，控制器的index（）方法不应该处理HTML；这完全是视图的工作。只提供构建HTML所需的数据。这可以使用列来完成。渲染。请参见此问题以获取示例。