Laravel5 Ajax刪除不起作用

Question

我正在開發一個項目，該項目中應使用ajax從users表中刪除用戶。 我一直在尋找多種解決方案，但是它根本無法正常工作。 這是我得到的錯誤：

加載資源失敗：服務器響應狀態為500（內部服務器錯誤） 。

JS：

$('.btn-delete').click(function(){
    var id = $(this).val();
    $.ajax({
        type: 'DELETE',
        url: '/laravel-exercise/public/index/'+id,
        success: function (data) {
            console.log('Success:', data);
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

視圖：

<button class="btn btn-danger btn-delete"
 value="{{$user->id}}" data-token="{{ csrf_token() }}">Delete</button>

路線：

Route::delete('index/{$id}', 'UsersController@destroy');

UsersController：

public function destroy($id)
    {
            $user = User::findOrFail($id);
            $user->delete();

            return view('pages.index')->with([
                'flash_message' => 'The user has been deleted.',
                'flash_message_important' => 'true',
            ]);
    }

這是怎么了？

Answer 1

可能是由於CSRF保護。

在綁定按鈕單擊之前，嘗試添加'X-CSRF-TOKEN' 。

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$('.btn-delete').click(function(){
    var id = $(this).val();
    $.ajax({
        type: 'DELETE',
        url: '/laravel-exercise/public/index/'+id,
        success: function (data) {
            console.log('Success:', data);
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

要將CSRF令牌添加到您的請求中。

在這里查看有關的信息。

找到路由，否則我將捕獲404異常。

編輯

查看如何制作按鈕，您還可以使用post請求，但傳遞_method數據。

HTML：

<button class="btn btn-danger btn-delete" value="{{$user->id}}"
     data-token="{{ csrf_token() }}">Delete</button>

Javascript：

$('.btn-delete').click(function(){
    var token = $(this).data('token');
    var id = $(this).val();

    $.ajax({
        url: '/laravel-exercise/public/index/'+id,
        type: 'post',
        data: {_method: 'delete', _token :token},
        success: function (data) {
            console.log('Success:', data);
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});