Laravel5 ajax删除无法正常工作

时间:2016-11-21 09:23:14

标签: javascript php jquery ajax laravel-5

我正在开展一个项目,我应该使用 ajax 删除来自users表的用户。我一直在寻求多种解决方案,但无论如何它根本就无法工作。这是我得到的错误:

  

无法加载资源:服务器响应状态为500(内部服务器错误)

TokenMismatchException in VerifyCsrfToken.php line 46

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',
            ]);
    }

这里出了什么问题?

1 个答案:

答案 0 :(得分:4)

可能是因为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令牌添加到您的请求中。

查看有关信息的here

找到路线,否则我将捕获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);
        }
    });
});