php - 在 Laravel 中使用 ajax 删除

Question

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

所以问题是这样的
当我单击按钮时，记录将被删除，但页面不会显示任何更改(我的意思是记录已被删除，但它仍在页面中，当我刷新页面时，它将隐藏并删除)

Controller :

 $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>