HTML → запрос → HTML

Интерфейс без полной перезагрузки

Восемь задач htmx 4.0.1. Вы меняете интерфейс — PHP возвращает готовую разметку.

Настоящий PHP + htmx

Запросы идут на сервер сайта. Данные вымышленные, изменения принадлежат только вашей сессии и сбрасываются после 30 минут бездействия. Не вводите личные данные и секреты.

Живой пример

Найдите заявку без перезагрузки

Введите «сайт», затем быстро измените запрос. После паузы 300 мс htmx отправит GET, а PHP вернёт готовые карточки.

hx-get · delay · hx-sync

Название или направление

Получаем HTML с сервера…

Найдено: 24. Показаны первые 5.

Заявка #1

Обновить сайт

Веб-разработка

Новая

Заявка #2

Настроить отчёт

Данные и отчёты

В работе

Заявка #3

Подключить оплату

Поддержка

Готово

Заявка #4

Проверить формы

Веб-разработка

Новая

Заявка #5

Обновить каталог

Данные и отчёты

В работе

HTML этого примера и PHP-обработчик

Фрагменты относятся к работающему проекту. Полный обработчик, проверки и шаблоны есть в ZIP.

<!-- Схема разметки; CSRF добавляет общий обработчик htmx:config:request. -->
<input name="q" hx-get="api.php?route=search"
  hx-trigger="input changed delay:300ms"
  hx-target="#search-results" hx-sync="this:replace">
<div id="search-results"></div>

<?php
// Реальная функция рендера из _app.php; helper-функции и маршруты api.php есть в ZIP.
function search_result(string $q): string {
    $items=array_filter(active_items(),function($x)use($q){return $q===''||preg_match('/'.preg_quote($q,'/').'/iu',$x['title'].' '.label_team($x['team']));});
    $html='<p class="result-summary" role="status">Найдено: '.count($items).'. Показаны первые 5.</p>';
    foreach(array_slice(array_values($items),0,5)as $item)$html.=card($item);
    return $html.(count($items)?'':'<div class="empty">Совпадений нет. Попробуйте «сайт» или очистите поле.</div>');
}

Что вернул сервер

Последние 8 запросов

Здесь видны метод, HTTP-статус и время настоящего запроса. Раскройте ответ: htmx вставляет именно этот HTML.

Выполните действие в примере — здесь появится запрос.