L5.1通过ajax部分加载刀片

Question

我部分用于循环图库：

<div id="galleryimgs" class="row">
    @foreach($images as $key => $value)
        <div class="col-lg-2 col-md-4 col-xs-6 thumb">
            <img class="img-responsive" src="{{ $value }}" alt="" style="margin-left: auto; margin-right: auto;">
            <div class="galleryremovebutton">
                <a href="/admin/offer/gallery/delete/{{ $offer->id }}/{{ $key }}" class="btn btn-danger" role="button">Izbrisi sliku</a>
            </div>
        </div>
    @endforeach
</div>

我的dropzone完成事件：

Dropzone.options.myGalleryDropzone = {

                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 2, // MB
                parallelUploads: 8,
                complete: function (response) {
                    $.getJSON( "/admin/offers/reload-gallery/{{ $offer->id }}", function( data ) {
                        $("#galleryimgs").html(data);
                    });
                }
            };

我得到的回应如下：

{"images":{"30":"\/media\/30\/conversions\/gallerythumb.jpg","31":"\/media\/31\/conversions\/gallerythumb.jpg"},"offerid":"65"}

现在我需要用这个响应重新加载上面的部分循环...

有任何想法吗？

Answer 1

试试这种方式：

在您的控制器方法中：

public function yourMethodName($id)
{
    // other code..
    return response([
        'status' => 'success',
        'html'   => view('path.to.partial_file', compact('images', 'offer'))->render();
    ]);
}

现在在你的ajax处理程序中：

$.getJSON( "/admin/offers/reload-gallery/{{ $offer->id }}", function( data ) {
    if(data.status === 'success') {
        $("#galleryimgs").html(data.html);
    } else {
        console.log('Some Error Occurred.');
    }
});

这应该够了吧。