时间戳

首页 > 解决方案 > 如何使用ajax发送到控制器？

php - 如何使用ajax发送到控制器？

问题描述

如何将代码添加到输入按钮，以便将 Id 的值发送到控制器？

我有八张图片。然后我点击116的id，打开这个图片。

图片

当我点击最大的照片时，为我打开一个引导模式。

模态的

这个动作标签表单被写入这个 ID 120，而我选择了 ID 116。

http://localhost:8000/admin/products/4/galleries/120

@section('content')
    <div class="col-md-10 p-5 pt-2">
        <form method="post" action="{{ route('products.galleries.store', $product->id) }}" enctype="multipart/form-data" class="dropzone" id="dropzone">
            @csrf
        </form>
        <hr>
        <div class="col-md-6 mx-auto">
            <div class="row">
                <div class="mx-auto" id="showImage">
                    <img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="deleteImage('{{ $gallery->id }}', '{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}')">
                </div>
            </div>
            <div class="row">
                @foreach($galleries as $gallery)
                    <div class="col-md-2">
                        <img src="{{ asset("storage/{$gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$gallery->image}") }}', '{{ $gallery->id }}')"><br><div class="text-center text-danger">{{ $gallery->id }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="delete" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <form action="{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}" method="post">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">This action is not reversible.</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete the image?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('script')
    <script src="{{ asset('themes/js/dropzone.min.js') }}"></script>
    <script>
        function showImage(url, id) {
            let route = "'"+'{{ route('products.galleries.delete', [$product->id, $gallery->id]) }}'+"'";
            let image = '<img src='+url+' onclick="deleteImage('+id+','+route+')" class="img-fluid cursor-pointer" />';
            $('#showImage').html(image);
        }

        function deleteImage(id, url) {
            $('#delete').modal(id, url);
        }
    </script>
@endpush

标签： phpjqueryajaxlaravel

解决方案

您正在遍历图库图像，在循环迭代完成后，您为模态编写代码，用于模态的图库的最后一个值是图库图像集合中的最后一个索引。

这段代码可以帮助你

$gallery = 5;
$galleries = [5,6,7,9,8];
foreach($galleries as $gallery) {
    // code
}
// now your $gallery variable does not hold 5 instead it has 8 as you assigned its value through loop

正如您之前使用 $gallery vairable 一样，您可以像这样修复您的代码

@foreach($galleries as $_gallery)
    <div class="col-md-2">
         <img src="{{ asset("storage/{$_gallery->image}") }}" class="img-fluid cursor-pointer" onclick="showImage('{{ asset("storage/{$_gallery->image}") }}', '{{ $_gallery->id }}')"><br><div class="text-center text-danger">{{ $_gallery->id }}</div>
    </div>
@endforeach

推荐阅读