Как использовать ответ, полученный через ajax, в laravel и не писать HTML в контроллере

Question

Я пытаюсь преобразовать данные из ответа ajax в HTML, в основном я читаю статьи, все пишут код HTML в контроллере, где я запутался, что мы не должны писать какие-либо HTML в контроллере.Я написал HTML в контроллере, но не удовлетворен таким программированием.Как я могу получить ответ и какой формат, чтобы я мог закодировать этот ответ в HTML или полученный в JSON или что-нибудь еще.В представлении м показан список производителей.Любой лучший способ, чистый способ не писать HTML в контроллере

View

    <div class="pl-md-4 pl-2">
        {{count($leedManufacturers)}}
        <label class=" my-checkbox gry2">Show All Manufacturers
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
        @if(count($leedManufacturers) > 0 )

        @foreach($leedManufacturers as $leedsManufacturer)
        {{-- @foreach($leedManufacturers as $leedsManufacturer)  --}}
            <div class="post" id="post{{$leedsManufacturer['id']}}">
                <label class=" my-checkbox gry2" id="manufacturer">{{str_limit($leedsManufacturer['name'], 300)}}
                        <input type="checkbox">
                        <span class="checkmark"></span>
                </label>
            </div>
            {{-- for load more script --}}
        {{-- <input type="hidden" id="row" value="0"> --}}

        {{-- <input type="hidden" id="all" value="{{$total_manufacturers}}"> --}}
        @endforeach

        @endif

        <button class="load-more" id="load" class="f-14 bold">See All</button>

        <input type="hidden" id="row" value="0">
        <input type="hidden" id="all" value="{{count($leedManufacturers)}}">


    </div>

Script

<script type="text/javascript">

        // $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
            $(document).ready(function(){

            // Load more data
            $('.load-more').click(function(){
                var row = Number($('#row').val());
                var allcount = Number($('#all').val());
                var rowperpage = 3;
                // row = row + rowperpage;
                row = row + 3;

                if(row <= allcount){
                    $("#row").val(row);

                    $.ajax({
                    // url: "{{ route('ajax') }}",
                    url: "{{ url('ajax') }}",
                    type: 'post',

                    headers: {
                        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {row:row},

                    // error: function(XMLHttpRequest, textStatus, errorThrown) {
                    //     alert('hi');
                    // }

                    success: function(response){

                    // Setting little delay while displaying new content
                    setTimeout(function() {
                        // appending posts after last post with class="post"
                        $(".post").after(response).show().fadeIn("slow");

                        var rowno = row + 3;

                        // checking row value is greater than allcount or not
                        if(rowno > allcount){

                            // Change the text and background
                            $('.load-more').text("show less");
                            $('.load-more').css("background","darkorchid");
                        }else{
                            $(".load-more").text("Load more");
                        }
                    }, 2000);
                    }
 });

                }else{
            $('.load-more').text("Loading...");

            // Setting little delay while removing contents
            setTimeout(function() {

                // When row is greater than allcount then remove all class='post' element after 3 element
                $('.post:nth-child(3)').nextAll('.post').remove().fadeIn("slow");

                // Reset the value of row
                $("#row").val(0);

                // Change the text and background
                $('.load-more').text("Load more");
                $('.load-more').css("background","#15a9ce");

            }, 2000);
        }
            });

            });
    </script>

Контроллер:

public function ajax(Request $request){ 

    $data['products'] = Product::select('products.id', 'products.name', 'products.banner')->get();

    $html = '';

    foreach ($data['products'] as $product){

        $html .= '<div class="post" id="">';
        $html .= '<label class=" my-checkbox gry2" id="manufacturer">'.$product->name.'';
        $html .= '<input type="checkbox">';
        $html .= '<span class="checkmark"></span>';
        $html .= '</label>';
        $html .= '</div>';  
    }
    echo $html;
}

Answer 1

Вы можете вернуть выделенное представление в свой ajax и добавить его в уже загруженное представление.

Создать представление, например, ajax.blade.php

<div>
@foreach ($products as $product){
    <div class="post" id="">
        <label class=" my-checkbox gry2" id="manufacturer">{{ $product->name }}
          <input type="checkbox">
          <span class="checkmark"></span>
        </label>
    </div>  
@endforech
</div>

И в вашем контроллеревы можете проверить запрос ajax и вернуть рендер, он вернет необработанный html, который вы можете вставить в ваш html через ajax.

return view('views.ajax')->with('products', $products)->render();

И в вашем скрипте вы можете просто

success: fucntion(response){
  document.querySelector('#id').innerHTML = response
}

Answer 2

Использование контроллера изнутри

public function ajax(Request $request){ 
    $products = Product::select('products.id', 'products.name', 'products.banner')->get();
    return view('ajax.product', compact('products'));
}

просмотр изнутри создайте представление ajax в моем случае views / ajax / product.blade.php и используйте этот код

@foreach ($products as $product){
    <div class="post" id="">
    <label class=" my-checkbox gry2" id="manufacturer">{{ $product->name }}
    <input type="checkbox">
    <span class="checkmark"></span>
    </label>
    </div>  
@endforech