Laravel中Delete按钮失效，如何为按钮定义DELETE请求方法？

问题根源：你用<a>标签发送GET请求访问destroy方法，但Laravel的资源路由里destroy动作默认要求DELETE请求，直接GET访问虽然能执行删除，但请求方式不匹配加上页面跳转逻辑导致出现空白页。

方案一：用表单发送DELETE请求（适合页面跳转场景） #

修改控制器index方法里的操作列代码，把原来的Delete链接替换为表单：

public function index()
{
    if(request()->ajax()) {
        return datatables()->of(Aya_div::select('*'))
            ->addIndexColumn()
            ->addColumn('action', function ($id) {
                $btn = '<a href="'.route("aya_div.show", $id).'" class="edit btn btn-info btn-sm">View</a>';
                $btn .= '<a href="'.route("aya_div.edit", $id).'" class="edit btn btn-primary btn-sm">Edit</a>';
                // 替换Delete按钮为表单
                $btn .= '<form action="'.route("aya_div.destroy", $id).'" method="POST" style="display:inline-block; margin-left:5px;">';
                $btn .= csrf_field(); // 必须添加CSRF令牌，防止跨站请求伪造
                $btn .= method_field('DELETE'); // 伪造DELETE请求方法，适配Laravel资源路由规则
                $btn .= '<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm(\'确定要删除这条数据吗？\')">Delete</button>';
                $btn .= '</form>';

                return $btn;
            })
            ->rawColumns(['action'])
            ->make(true);
    }
        
    return view('aya_div.index');
}

同时修正destroy方法的两个小问题：

public function destroy($id)
{
    $div = Aya_div::findOrFail($id); // 用findOrFail替代find，找不到数据时自动返回404
    $div->delete();

    return redirect()->route('aya_div.index')->with('success', '数据删除成功'); // 修正successs的拼写错误
}

方案二：用AJAX异步删除（无页面跳转） #

如果希望不刷新页面完成删除，可以用AJAX实现：

1. 修改控制器index方法的操作列，生成带data-id的按钮：

public function index()
{
    if(request()->ajax()) {
        return datatables()->of(Aya_div::select('*'))
            ->addIndexColumn()
            ->addColumn('action', function ($id) {
                $btn = '<a href="'.route("aya_div.show", $id).'" class="edit btn btn-info btn-sm">View</a>';
                $btn .= '<a href="'.route("aya_div.edit", $id).'" class="edit btn btn-primary btn-sm">Edit</a>';
                // 换成带data-id的删除按钮
                $btn .= '<button class="btn btn-danger btn-sm delete-btn" data-id="'.$id.'" style="margin-left:5px;">Delete</button>';

                return $btn;
            })
            ->rawColumns(['action'])
            ->make(true);
    }
        
    return view('aya_div.index');
}

2. 修改destroy方法返回JSON响应：

public function destroy($id)
{
    Aya_div::findOrFail($id)->delete();
    return response()->json(['success' => '数据删除成功']);
}

3. 在页面<head>中添加CSRF元标签（如果页面没有的话）：

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

4. 页面底部添加AJAX处理脚本：

<script>
$(document).on('click', '.delete-btn', function() {
    if(!confirm('确定要删除吗？')) return;
    
    let id = $(this).data('id');
    $.ajax({
        url: "{{ route('aya_div.destroy', ':id') }}".replace(':id', id),
        type: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(res) {
            // 刷新DataTables表格，替换#your-table-id为你表格的实际ID
            $('#your-table-id').DataTable().ajax.reload();
            alert(res.success);
        },
        error: function() {
            alert('删除失败，请稍后重试');
        }
    });
});
</script>

内容的提问来源于stack exchange，提问作者Nameless 10