如何使用ajax请求删除laravel 5.3中的记录?

时间:2016-09-06 13:58:33

标签: php ajax laravel laravel-5

我正在尝试使用laravel 5.3中的ajax删除记录,我知道这是常见问题之一,并且已经有很多关于此主题的在线解决方案和教程。我尝试了其中一些,但大多数给了我同样的错误NetworkError: 405 Method Not Allowed。我试图以不同的角度完成这项任务,但我被困住了,找不到我错的地方,这就是为什么我把这个问题作为指导原则。

我正在尝试使用以下脚本删除记录。

Controller.php这样

public function destroy($id)
{   //For Deleting Users
    $Users = new UserModel;
    $Users = UserModel::find($id);
    $Users->delete($id);
    return response()->json([
        'success' => 'Record has been deleted successfully!'
    ]);
}

routes.php文件

Route::get('/user/delete/{id}', 'UserController@destroy');

在视图中

<button class="deleteProduct" data-id="{{ $user->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>

App.js

$(".deleteProduct").click(function(){
        var id = $(this).data("id");
        var token = $(this).data("token");
        $.ajax(
        {
            url: "user/delete/"+id,
            type: 'PUT',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                console.log("it Work");
            }
        });

        console.log("It failed");
    });

当我点击删除按钮时,它在控制台中返回错误NetworkError: 405 Method Not Allowed。没有ajax相同的删除功能正常工作。

任何人都可以指导我,我可以解决问题的地方,如果有人指导我,我会很感激。谢谢..

4 个答案:

答案 0 :(得分:18)

而不是使用Route::get使用Route::delete

除此之外,还会在ajax调用中将type: 'Put'更改为type: 'DELETE'

P.S。这段代码

$Users = new UserModel;        // Totally useless line
$Users = UserModel::find($id); // Can chain this line with the next one
$Users->delete($id);

可以写成:

UserModel::find($id)->delete();

甚至更短:

UserModel::destroy($id);

请注意,->delete()会触发某个事件而::destroy()则不会。

答案 1 :(得分:4)

请务必将其添加到视图的meta标记中

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

Routes中,执行此操作

Route::delete('/user/delete/{id}', 'UserController@destroy');

在您的控制器中,执行此操作

UserModel::destroy($id);

DB::table('table_name')->where('id', $id)->delete();

请务必检查删除该帐户的用户是否实际拥有该帐户a.k.a运行授权测试。

由于它是delete请求,因此您需要发送csrf_token以及官方网站声明的ajax标头。 https://laravel.com/docs/5.5/csrf#csrf-x-csrf-token

确保在ajax调用之前添加此内容

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

现在发送请求

$(".deleteProduct").click(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax(
    {
        url: "user/delete/"+id,
        type: 'delete', // replaced from put
        dataType: "JSON",
        data: {
            "id": id // method and token not needed in data
        },
        success: function (response)
        {
            console.log(response); // see the reponse sent
        },
        error: function(xhr) {
         console.log(xhr.responseText); // this line will save you tons of hours while debugging
        // do something here because of error
       }
    });
});

我希望这会有所帮助。

答案 2 :(得分:1)

我正在恢复工作流程的删除,请求VERB。希望它有所帮助

  

并且控制器中有一个可以处理ajax请求的注释代码

在表单中(使用刀片):

  {{ Form::open(['method' => 'DELETE', 'route' => ['admin.products.edit', $product->id], 'name' => 'delete']) }}
    {{ Form::close() }}

<强>路线:

Route::delete('admin/products/{id}/edit', ['as' => 'admin.products.edit', 'uses' => 'Product\ProductController@delete']);

<强> ProductController的:

 public function delete($id)
    {
        // if (Request::ajax()) {
        // if (Request::isMethod('delete')){

        $item = Product::findOrFail($id);
        $item->delete();

        return redirect()->route('admin.products')->with('flashSuccess', 'deleted');
    }

在重定向部分,我带着成功通知程序回到我的列表页面(admin.products)。路线是:

Route::get('admin/products', ['as' => 'admin.products', 'uses' => 'Product\ProductController@getList']);

所以你可以完成这个流程。

答案 3 :(得分:1)

$(".deleteProduct").click(function(){
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$.ajax(
{
    url: "user/delete/"+id,
    type: 'DELETE', // Just delete Latter Capital Is Working Fine
    dataType: "JSON",
    data: {
        "id": id // method and token not needed in data
    },
    success: function (response)
    {
        console.log(response); // see the reponse sent
    },
    error: function(xhr) {
     console.log(xhr.responseText); // this line will save you tons of hours while debugging
    // do something here because of error
   }
});

});