Вопрос по отправке данных на сервер и обработке ответа?

Question

[dch3]

Пользователь, нажимая на кнопку, делает fetch запрос на сервер.
В теле запроса передается период дат.
Сервер на основании этого периода запрашивает из БД данные и отдает их в респонсе.
В результате при получении ответа, на страничке появляется таблица, заполненная данными из респонса.

Т.к. я пишу клиентскую часть на чистом js, то процесс создания новых элементов и создания их текстовых узлов, довольно трудоемкий.
Вот я и подумал, что лучше мне будет создать необходимую табличку на сервере и отдать это представление на клиента, в ответ на клик пользователем на искомую кнопку.

представление:

@extends('layouts.base')

@section('content')

    <div class="conteiner form-box col-8 mx-auto mt-5">

        <div class="d-flex flex-row">
            <p class="ms-2 mt-3">за период:</p>

            <label for="period" class="form-label me-3">с</label>
            <input type="date" id="period" name="period-start" class="form-control">

            <label for="period" class="form-label ms-5 me-3">по</label>
            <input type="date" id="period" name="period-end" class="form-control">
        </div>

        <div>
            <p>представить результат за указанный период</p>
            <button type="button" class="btn" name="send-period">Ok</button>
        </div>

        <div>
            @isset($data)

                <table>
                    <tr>
                        <th>date</th>
                        <th>transaction</th>
                        <th>category</th>
                        <th>subcategory</th>
                        <th>sum</th>
                        <th>currency</th>
                    </tr>

                    @foreach ($data as $element)
                    <tr>
                        <td>{{ $element['date'] }}</td>
                        <td>{{ $element['transaction'] }}</td>
                        <td>{{ $element['category'] }}</td>
                        <td>{{ $element['subcategory'] }}</td>
                        <td>{{ $element['sum'] }}</td>
                        <td>{{ $element['currency'] }}</td>
                    </tr>
                    @endforeach
                </table>

            @endisset
        </div>

    </div>

@endsection

@section('footer')
@include('includes.footer')
@endsection

В этом случае в ответ на клик по кнопке, отправляется fetch запрос, на который мне нужно отдать представление (см. выше). Как это сделать правильно сделать?
Пробовал в скрипте, который обрабатывает клиентский запрос возвращать
return to_route('web.modify', ['data' => $data]);
Но как теперь "заставить" сервер отобразить требуемое представление?

Запутался.
Спасибо за ответы!

Answer 1

[Сергей delphinpro]

Представление самой страницы

…
<div id="table">
  @include('table')
</div>
…

Отдельная вьюха для таблицы

<table>
    <tr>
    ...
    </tr>
    @foreach ($data as $element)
       <tr>
           <td>{{ $element['date'] }}</td>
           ...
       </tr>
    @endforeach
</table>

Отдельный маршрут для запроса таблицы

Route::get('getTable', function(){
  ...
  return response()->json([
    'target' => 'table',
    'html' => view('table', [...])->render()
  ])
});

B универсальная функция запроса в js

function getChank(url, data) {
  return fetch(url, {
    body: data,
  }).then(response => response.json())
    .then(response => {
        const target = document.getElementById(response.target);
        target.innerHTML = response.html;
    });
}

-------
А еще посмотрите в сторону Liveware. С ним все получится намного удобнее и красивее.

Comments

[dch3]

@delphinpro
Спасибо за ответ!
Вроде понятно) Попробую сейчас реализовать на практике