как отображать данные ответа json от контроллера на странице блейда в laravel с помощью ajax?

у меня есть данные, возвращаемые из контроллера ответом ajax в формате json, и я могу распечатать данные в консоли. но я хочу отобразить его в таблице, как я могу отобразить его? я сделал поиск решения, но все решения пишут HTML-код в функции контроллера и возвращают его в качестве ответа, так что есть ли другое решение

мой контроллер

<?php

namespace App\Http\Controllers\backend;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

use App\Category;

class CategoryCtrl extends Controller
{
    //function search - show categories live search
    public function index(Request $request)
    {
        if($request->ajax())
        {
            $categories = Category::where('name','LIKE','%'.$request->cat_search."%")->orderBY('created_at','DESC')->get();
            return Response()->json($categories);
        }
        else {
            $categories = Category::orderBY('created_at','DESC')->get();
            return view('backend.category.list')->withcategories($categories);
        }
    }

}

Посмотреть

@extends('backend.layouts.app')

@section('content')

    <input class="form-control" type="text" name="search" id="cat_search" placeholder="Category Search..." />
                   
    <table id="CategoriesTable" class="table table-striped table-vcenter js-dataTable-simple">
        <thead>
            <tr>
               <th class="text-center w-5">#</th>
               <th class="text-center">Name</th>
               <th class="text-center hidden-xs">Icon</th>
               <th class="text-center hidden-xs">Order</th>
               <th class="text-center w-15">Status</th>
               <th class="text-center">Created At</th>
               <th class="text-center">Last Update</th>
               <th class="text-center" style="width: 15%;">Actions</th>
            </tr>
        </thead>
        <tbody>

                    @foreach ($categories as $key=>$category)
                        <tr>
                            <td class="text-center">{{ $key+1 }}</td>
                            <td class="text-center text-capitalize">{{ $category->name }}</td>
                            <td class="text-center hidden-xs"><i class="{{ $category->icon }} fa-lg"></i></td>
                            <td class="text-center hidden-xs">{{ $category->order }}</td>
                            <td class="text-center text-capitalize"> 
                                <span class="btn btn-sm btn-pill @if($category->status == 'active') btn-primary @else btn-warning @endif">{{ $category->status }}</span> 
                            </td>
                            <td class="text-center">{{ $category->created_at->format("Y-m-d g:i a") }}</td>
                            <td class="text-center">{{ $category->updated_at->format("Y-m-d g:i a") }}</td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <a href="{{ route('category.edit', ['id' => $category->id]) }}" class="btn btn-success">Edit</a>
                                    <button class="btn btn-app" data-toggle="modal" data-target="#{{ $category->name.$category->id }}">Delete</button>
                                </div>
                                <!-- Modal -->
                                <div class="modal fade" id="{{ $category->name.$category->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-card-header">
                                                <div class="row">
                                                    <h4 class="col-md-10">Delete Category</h4>
                                                    <ul class="card-actions col-md-2">
                                                        <li>
                                                            <button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="card-block">
                                                <p>Are you sure, you want to delete category (<span class="text-capitalize">{{ $category->name }}</span>) ?</p>
                                                <p>If you delete category, you will delete all category's products too.</p>
                                                <p>Notice: if you want to hide category, you can update it's status to not active instad of delete it.</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                                                {!! Form::Open(['url' => route('category.delete', ['id' => $category->id]) ]) !!}
                                                    <button class="btn btn-app" type="submit" data-dismiss="modal"> Delete</button>
                                                {!! Form::Close() !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Modal -->

                            </td>
                        </tr>
                    @endforeach
                   
                </tbody>
            </table>
    
@endsection

ajax-код

<!--  Ajax code for category live search  -->
    <script type="text/javascript">
        $('#cat_search').on('keyup',function(){
            $value = $(this).val();
            $.ajax({
                type : 'get',
                url : '{{ route('category.index') }}',
                data:{'cat_search':$value},
                dataType: 'json',
                success:function(response){
                    //console.log(response);
                });

             });
        })
    </script>

person Mahmoud Elsherbeney    schedule 17.01.2021    source источник


Ответы (1)


лучший способ, который я могу сказать, это сделать лезвие для этой таблицы и в контроллере, как обычно, вернуть данные в это представление:

 return view('your-blade-just-for-table')->with('data', $data);

и в своем лезвии снова, как обычно, вы отображаете свои данные с помощью laravel в своей таблице

поэтому laravel вернет лезвие вашему методу ajax-success

и в вашем методе успеха вы можете сделать что-то вроде:

    success: function (data) {
            $('.list-group').html(data);
        },

и везде, где вы хотите, чтобы ваша таблица была просто поместите этот div:

<div class="list-group" id="myFileContainer"></div>
person milad hedayatpoor    schedule 18.01.2021
comment
это помощь, но если я получил в ответ данные нескольких категорий; как зациклить и отобразить данные? - person Mahmoud Elsherbeney; 18.01.2021
comment
вы просто зацикливаете их, как обычно, с помощью laravel в этом лезвии. я не понимаю, что вы имеете в виду, но проблем быть не должно - person milad hedayatpoor; 19.01.2021
comment
когда я возвращаю данные для просмотра, как обычно, я не могу получить доступ к данным из функции успеха, и если я верну их как ответ и покажу в div, я не могу зациклить их - person Mahmoud Elsherbeney; 20.01.2021
comment
вы не поняли, что я имею в виду, я думаю. вы сделали лезвие, которое просто включает в себя таблицу, которую вы хотите ??? Вы отправили запрос ajax в свою функцию и вернули данные в этот блейд, как и в моей первой строке кода? если вы это сделали, вы можете использовать следующие строки кода, которые я написал, чтобы показать вашу таблицу. вам не нужно получать доступ к данным laravel в вашем методе успеха - person milad hedayatpoor; 20.01.2021
comment
Я пропустил несколько строк, но теперь это работает. Спасибо, бро - person Mahmoud Elsherbeney; 21.01.2021
comment
если это помогло вам, пожалуйста, отметьте это как лучший ответ, чтобы другие могли использовать его тоже, удачи, братан - person milad hedayatpoor; 21.01.2021