使用 ajax 在 Laravel 中删除

Question

我正在使用 Laravel，我想用按钮从管理面板中删除记录 所以我想使用 Ajax 在我想删除时不刷新页面

问题是这样的
当我点击按钮时，记录将被删除，但页面没有显示任何变化（我的意思是记录被删除但它仍在页面中，当我刷新页面时它会隐藏并删除）

控制器：

 $comment = Comment::find($id); 
 $comment->delete($id);

查看：

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ __('comment.index.comments') }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
            {{--<a href="#" class="btn btn-sm btn-outline-success disabled">{{ __('comment.index.create') }}</a>--}}
            {{--<a href="#" class="btn btn-sm btn-outline-secondary">Export</a>--}}
        </div>
        {{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
            {{--<i class="fa fa-calendar-o"></i>--}}
            {{--This week--}}
        {{--</button>--}}
        <span>
             <a href="#" class="btn  btn-warning btn-sm">Excel <i class="fas fa-cloud-download-alt"></i></a>
             <a href="#"  class="btn  btn-info btn-sm">Create <i class="fas fa-plus-square"></i></a>
        </span>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>{{ __('comment.index.id') }}</th>
            <th>{{ __('comment.index.user-id') }}</th>
            <th>{{ __('comment.index.parent-id') }}</th>
            <th>{{ __('comment.index.comment') }}</th>
            <th>{{ __('comment.index.commentable-id') }}</th>
            <th>{{ __('comment.index.commentable-type') }}</th>
            <th>{{ __('comment.index.status') }}</th>
            <th>{{ __('comment.index.data') }}</th>
            <th>{{ __('comment.index.setting') }}</th>
        </tr>
        </thead>
        <tbody>
        @foreach($comments as $comment)
            <tr>
                <td><a href="{{ route('comment.show', $comment->id) }}">{{ $comment->id }}</a></td>
                <td>{{ $comment->user_id }}</td>
                <td>{{ $comment->parent_id }}</td>
                <td>{{ $comment->comment }}</td>
                <td>{{ $comment->commentable_id }}</td>
                <td>{{ $comment->commentable_type }}</td>
                <td>{{ $comment->status }}</td>
                <td>{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</td>
                <td>
                    {{--<form action="{{ route('change.approved', $comment->id) }}" method="post">--}}
                        {{--@csrf--}}
                        {{--{{ method_field('put') }}--}}
                        {{--<input value="change approved {{ $comment->approved }}" type="submit" class="btn btn-sm btn-success">--}}
                    {{--</form>--}}
                    {{--<form action="{{ route('comment.destroy', $comment->id) }}" method="post">--}}
                        {{--@csrf--}}
                        {{--{{ method_field('delete') }}--}}
                        {{--<input value="delete" type="submit" class="btn btn-sm btn-danger">--}}
                    {{--</form>--}}



                    <form class="form-inline" action="{{ route('change.approved', $comment->id) }}" method="post">
                        @csrf
                        {{ method_field('put') }}
                        {{--<input value="" >--}}
                        <button type="submit" class="btn btn-link"><i class="fa @if( $comment->approved == 1) fa-toggle-on text-success @else fa-toggle-off text-secondary @endif"></i> approved</button>
                    </form>

                    <hr class="p-0 m-1">
                    <button class="deleteProduct" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>

                    @csrf
                        {{ method_field('delete') }}
                        {{--<input value="delete">--}}
                        <button class="btn btn-sm btn-danger" type="submit"><i class="fa fa-trash"></i></button>
                    </form>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

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

        console.log("It failed");
    });
</script>

和路线：

Route::delete('/comment/delete/{id}', 'admin\CommentController@destroy')->name('comment.destroy');

顺便说一句，我在我看来使用 AJAX

Answer 1

在tr 标签中添加注释id，这样每个tr 标签都是唯一的。在 ajax 成功时，使用注释 id 删除 row(tr)。

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ __('comment.index.comments') }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
            {{--<a href="#" class="btn btn-sm btn-outline-success disabled">{{ __('comment.index.create') }}</a>--}}
            {{--<a href="#" class="btn btn-sm btn-outline-secondary">Export</a>--}}
        </div>
        {{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
            {{--<i class="fa fa-calendar-o"></i>--}}
            {{--This week--}}
        {{--</button>--}}
        <span>
             <a href="#" class="btn  btn-warning btn-sm">Excel <i class="fas fa-cloud-download-alt"></i></a>
             <a href="#"  class="btn  btn-info btn-sm">Create <i class="fas fa-plus-square"></i></a>
        </span>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
          <tr>
              <th>{{ __('comment.index.id') }}</th>
              <th>{{ __('comment.index.user-id') }}</th>
              <th>{{ __('comment.index.parent-id') }}</th>
              <th>{{ __('comment.index.comment') }}</th>
              <th>{{ __('comment.index.commentable-id') }}</th>
              <th>{{ __('comment.index.commentable-type') }}</th>
              <th>{{ __('comment.index.status') }}</th>
              <th>{{ __('comment.index.data') }}</th>
              <th>{{ __('comment.index.setting') }}</th>
          </tr>
        </thead>

        <tbody>
          @foreach($comments as $comment)
            <tr id="{{ $comment->id }}">
                <td><a href="{{ route('comment.show', $comment->id) }}">{{ $comment->id }}</a></td>
                <td>{{ $comment->user_id }}</td>
                <td>{{ $comment->parent_id }}</td>
                <td>{{ $comment->comment }}</td>
                <td>{{ $comment->commentable_id }}</td>
                <td>{{ $comment->commentable_type }}</td>
                <td>{{ $comment->status }}</td>
                <td>{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</td>
                <td>

                    <form class="form-inline" action="{{ route('change.approved', $comment->id) }}" method="post">
                        @csrf
                        {{ method_field('put') }}

                        <button type="submit" class="btn btn-link"><i class="fa @if( $comment->approved == 1) fa-toggle-on text-success @else fa-toggle-off text-secondary @endif"></i> approved</button>
                    </form>

                    <hr class="p-0 m-1">
                    <button class="deleteProduct" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>

                    @csrf
                        {{ method_field('delete') }}
                        {{--<input value="delete">--}}
                        <button class="btn btn-sm btn-danger" type="submit"><i class="fa fa-trash"></i></button>
                    </form>
                </td>
            </tr>
          @endforeach
        </tbody>
    </table>
</div>

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

        console.log("It failed");
    });
</script>

Answer 2

去做吧。

<script>
 $(".deleteProduct").click(function(){
    var btn = $(this);
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                btn.closest("tr").remove(); // closest tr removed
                console.log("it Work");
            }
        });

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

Answer 3

您只需单击该行即可隐藏该行。像这样的……

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

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

希望对您有所帮助.. 您可以在成功响应后使用它

Answer 4

你必须修改你的脚本

<script>
 $(".deleteProduct").click(function(){
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                $(this).closest("tr").remove();
                alret('record deleted success fully');//or whatever type alert you want to show
            }
        });

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