通过Ajax删除图像而不重新加载页面laravel答案

【问题标题】：Delete Image through Ajax without reloading page laravel通过Ajax删除图像而不重新加载页面laravel
【发布时间】：2019-01-14 14:42:18
【问题描述】：

我想在不通过 Ajax 重新加载页面的情况下删除图像，但是每次我删除图像时，首先它没有被删除，但是当我刷新页面时图像可以删除。

app.js：

$('.delete-image').on('click', function(e){
    e.preventDefault();
    let id = $(this).attr('data-id');
    bootbox.confirm("Are you sure you want to delete this company?", function(result){
        if(result){
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type : 'DELETE',
                url : '/albums/delete',
                data : {
                    id : id,
                },
                success : function(response){
                    if(response){
                        $(this).parents('.album').slideUp().remove();
                    }
                }.bind(this)
            })
        }
    }.bind(this));
});

相册控制器：

public function deleteImage(Request $request){
        $album = Album::find($request->id);
            if($album->delete())
                return response()->json(true);
            else
                return response()->json(false);
    }

blade.php：

@extends('layout.app')

@section('content')
    <div class='medium-3 columns end'>
        <div class="row text-center">
            @foreach($album as $albm)
                <h4>{{$albm->name}}</h4>
                <h4>{{$albm->description}}</h4>
                <a href="/albums/{{$albm->id}}" class="btn btn-link">Edit
                    <img class="thumbnail" src="/storage/store/{{$albm->cover_image}}" alt="{{$albm->name}}">
                </a>
                <a href="" class="btn btn-link delete-image" data-id="{{$albm->id}}">Delete</a>
                <br>
            @endforeach
        </div>
    </div>
@endsection

路线：

Route::delete('/albums/delete', 'AlbumController@deleteImage');

【问题讨论】：

最好的方法是隐藏图像。如果只删除当前用户的图像，为什么要在运行时删除它？还是从服务器中删除？

标签： php ajax laravel

【解决方案1】：

$(this).parents('.album').slideUp().remove();

您没有带有class="album" 的元素，因此选择器不会匹配任何内容。

【讨论】：

还有一件事是如果我删除一个图像页面没有重新加载并且图像被删除。但是其他图像在删除后不显示，直到页面再次刷新？我现在该怎么办。

【解决方案2】：

删除成功响应后，只需删除其具有类row 的父div

$('.delete-image').on('click', function(e){
    e.preventDefault();
    let id = $(this).attr('data-id');

    let parentDiv = $(this).closest('div.row');

    bootbox.confirm("Are you sure you want to delete this company?", function(result){
        if(result){
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type : 'DELETE',
                url : '/albums/delete',
                data : {
                    id : id,
                },
                success : function(response){
                    if(response){
                        $(parentDiv).remove();
                    }
                }.bind(this)
            })
        }
    }.bind(this));
});

【讨论】：