Как частично отобразить с помощью AJAX? Ларавель 5.2

Я нахожусь в ситуации, когда я хочу перечислить информацию о парковочных местах, которые хранятся в базе данных MYSQL. Я использую AJAX для вызовов конечной точки API (/api/spots) и возврата списка точек. Я создал частичное представление, используя синтаксис блейда для размещения информации (partials/Spot.blade.php).

Мне интересно, есть ли способ создать метод контроллера, который будет возвращать частичное представление и отображать его на части страницы, не возвращаясь на сервер. Возможно ли это, используя мои частичные/Spot.blade.php? Может быть, мне следует создать метод для возврата всех данных HTML в виде строки и получить JS, чтобы добавить это в DOM?

То, как я сейчас это делаю, - это рендеринг partials/Spot.blade.php при первоначальной загрузке страницы и удаление его с экрана с помощью CSS. Затем, после вызова AJAX на сервер, я беру HTML в этом скрытом фрагменте и использую REGEX для размещения данных в макете. Хотя это кажется немного грязным. Просто интересно, как другие люди решили эту проблему.

Ваш отзыв будет принят с благодарностью,

Мэтт


ajax laravel laravel-blade partial-views laravel-5.2
person Matt Catellier    schedule 05.06.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Это просто (:

Посмотрите на этот пример и внесите свои изменения:

контроллер:

class StatisticsController extends Controller
{

    public function index()
    {
        return view('statistics.index');
    }


    public function filter(Request $request, $fields) {
        // some calculation here...
        return view('statistics.response', compact('stats')); // will render statistics/response.blade.php file with passing results of filter
    }
}

взгляды:

страница со статистикой фильтрации по дате/index.blade.php

@extends('layouts.billing')

@section('title') Statistics @stop

@section('js_footer')
    <script>
        function doGet(url, params) {
            params = params || {};

            $.get(url, params, function(response) { // requesting url which in form
                $('#response').html(response); // getting response and pushing to element with id #response
            });
        }

        $(function() {
            doGet('/statistics/filter'); // show all

            $('form').submit(function(e) { // catching form submit
                e.preventDefault(); // preventing usual submit
                doGet('/statistics/filter', $(this).serializeArray()); // calling function above with passing inputs from form
            });
        });
    </script>
@stop

@section('content')
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>Statistics</h3>
                </div>
                <div class="panel-body">
                    <form>
                        <label>Time</label>
                        <div class="input-group">
                            <input type="text" name="time_from" value="{{ date('Y-m').'-01 00:00:00' }}"  class="form-control"  autocomplete="off">
                            <input type="text" name="time_to" value="{{ date('Y-m-d H:i:s', time()) }}"  class="form-control"  autocomplete="off">
                        </div>

                        <button type="submit" class="btn btn-sm btn-primary pull-right">
                          <i class="fa fa-search"></i> Show
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div id="response"> HERE WILL BE INJECTED RESULT OF FILTERING </div>
        </div>
    </div>
@stop

и partial для рендеринга результата фильтрации:

статистика/response.blade.php

<div class="table-responsive">
    <table class="table table-striped table-borderless text-center">
        <thead>
            <th>ID</th>
            <th>Partner</th>
            <th>Tariffs</th>
            <th>Total</th>
        </thead>
        <tbody>
        @foreach($stats AS $stat)
            some data here
        @endforeach
        </tbody>
    </table>
  </div>
person num8er    schedule 05.06.2016
comment
Таким образом, контроллер возвращает частичный список, в котором перечислены все статистические данные, и в случае успеха вы заменяете содержимое списком информации. Ницца! и спасибо за примеры кодов! :D - person Matt Catellier; 06.06.2016
comment
Скажем, я хотел продолжить добавлять в список, но только новые элементы по мере изменения запроса. Итак, срабатывает какое-то событие, и я запускаю новый запрос с использованием AJAX и просто хочу добавить его в список, который уже был обработан. Как бы это сделать? - person Matt Catellier; 06.06.2016
comment
Это больше вопрос JS, чем вопрос laravel. Вы всегда можете добавить () в контейнер для результата ajax. В противном случае подумайте об ответе с помощью json и рендеринге с использованием усов. - person num8er; 06.06.2016