Laravel 11 使用 Bootstrap 5 模式删除项目 - 错误 405 方法不允许

Question

我需要通过模式确认删除项目并收到此错误：“路由角色不支持 DELETE 方法。支持的方法：GET、HEAD、POST。”

web.php：

Route::delete('/roles/{id}/delete', [RoleController::class, 'delete'])->name('roles.delete');

角色控制器.php：

public function delete($id): RedirectResponse
    {
        return redirect()->route('roles.index')->withSuccess(__('Role deleted successfully'));
    }

index.blade.php：

<a href="{{ route('roles.delete', $role->id) }}" class="btn btn-danger btn-xs btn-action" data-bs-toggle="tooltip" data-bs-custom-class="ls-tooltip" title="{{ __('Delete') }}" data-action-message="{{ __('Delete this role?') }}"><i class="fas fa-trash"></i></a>

<div class="modal fade" id="confirm_action">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h1 class="modal-title fs-5 text-white">{{ __('Please confirm') }}</h1>
            </div>
            <div class="modal-body">
                <div class="modal-message"></div>

                <div class="mt-1 d-flex justify-content-end">
                    <form id="form_delete" method="post">
                        @csrf
                        @method('DELETE')

                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-danger ms-2">{{ __('Delete') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

app.js：

const confirm_action = document.getElementById('confirm_action');
const btn_delete = document.querySelectorAll('.btn-action');

if (typeof(confirm_action) != 'undefined' && confirm_action != null) {
    const modal = new bootstrap.Modal(confirm_action);
    const form = document.getElementById('form_delete');

    let url, message;

    confirm_action.addEventListener('show.bs.modal', event => {
        const confirm_text = confirm_action.querySelector('.modal-message');
        confirm_text.textContent = message;
    });

    form.addEventListener('submit', event => {
        event.preventDefault();

        axios.delete(url, {
            data: {
            },
        }).then(response => {
            console.log(response.data);
        }).catch(error => {
            console.log(error.response.data);
        });
    });

    btn_delete.forEach(btn => {
        btn.addEventListener('click', event => {
            event.preventDefault();
            url = btn.getAttribute('href');
            message = btn.getAttribute('data-action-message');
            modal.show();
        });
    });
}

Answer 1

我确信您的

url = undefined

在

axios.delete(url, {

-> axios 会得到

url="your web url"

-> 和

"your web url"

只是

 Supported methods: GET, HEAD, POST."

解决方案：

在表单中添加隐藏的

url

字段

   <form id="form_delete" method="post">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" id="form_url" />
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-danger ms-2">{{ __('Delete') }}</button>
   </form>

单击按钮 => 设置

url

为隐藏字段

将形式从

addEventListener

更改为

submit

事件

<form id="form_delete" onsubmit="yourSubmitFn()" method="post">

因为当你添加事件监听器 => js 将存储旧的

url

之后，如果你更改 url => js 仍然保留旧的

url

值