Передача данных в компиляторы

Unpoly — это JavaScript-библиотека, предназначенная для динамического обновления страниц без полной перезагрузки браузера. Одним из ключевых аспектов её использования является передача данных между клиентом и сервером. Unpoly строится на принципах прогрессивного улучшения и предоставляет удобные инструменты для передачи как простых параметров, так и сложных объектов.

Отправка данных через атрибуты up-

Unpoly использует HTML-атрибуты, начинающиеся с up-, для конфигурирования поведения ссылок, форм и других элементов. Для передачи данных наиболее важны следующие атрибуты:

  • up-target — указывает, какой элемент на странице будет заменён после выполнения запроса.
  • up-data — позволяет указать дополнительные параметры для отправки вместе с запросом. Значение может быть простым объектом в формате JSON или строкой, совместимой с URL-параметрами.
  • up-method — задаёт HTTP-метод запроса (GET, POST, PUT, DELETE).

Пример передачи данных через ссылку:

<a href="/users" 
   up-target="#user-list" 
   up-data='{ "role": "admin", "active": true }'>
   Показать администраторов
</a>

В этом примере при клике по ссылке будет выполнен AJAX-запрос к /users, передавая объект { role: "admin", active: true } и обновляя содержимое элемента с id user-list.

Передача данных через формы

Для форм Unpoly автоматически сериализует поля формы и отправляет их вместе с запросом. Дополнительно можно использовать up-data для добавления динамических параметров, которых нет в полях формы:

<form up-target="#results" up-method="POST">
    <input name="query" type="text">
    <input type="hidden" name="token" value="abc123">
    <button type="submit" up-data='{ "page": 1 }'>Поиск</button>
</form>

При отправке формы Unpoly объединит данные из всех полей формы с объектом из up-data и отправит их на сервер.

Программная передача данных

Unpoly предоставляет API для отправки запросов напрямую через JavaScript. Метод up.request позволяет формировать запрос с полной конфигурацией:

up.request('/users', {
    method: 'POST',
    target: '#user-list',
    params: { role: 'editor', active: true },
    headers: { 'X-CSRF-Token': 'abc123' }
});

Параметр params служит для передачи данных, аналогично up-data в HTML. target указывает на элемент, который будет обновлён после ответа сервера.

Динамическая генерация данных

Для динамически вычисляемых значений можно использовать функции в up-data. Функция должна возвращать объект с параметрами:

<button 
    up-target="#user-list" 
    up-data="function(){ return { filter: document.querySelector('#filter').value }; }">
    Фильтровать
</button>

Unpoly вызовет функцию при каждом клике и отправит результат на сервер. Это позволяет отправлять актуальные значения без изменения HTML-кода формы.

Обработка сложных объектов

Unpoly корректно сериализует вложенные объекты и массивы. Для передачи сложных структур в up-data используется синтаксис JSON:

<a href="/items" 
   up-target="#item-list" 
   up-data='{ "categories": ["books", "electronics"], "sort": { "field": "price", "order": "asc" } }'>
   Показать товары
</a>

На сервере данные будут доступны как полноценная структура, без необходимости разбирать строку вручную.

Программная модификация данных перед отправкой

События up:form:submit и up:request позволяют перехватывать запросы и модифицировать данные перед отправкой:

up.on('up:form:submit', function(event) {
    event.detail.formData.append('timestamp', Date.now());
});

Здесь formData — объект FormData, который будет отправлен на сервер. Можно добавлять новые поля или изменять существующие значения динамически.

Отправка данных через HTTP-заголовки

Unpoly позволяет добавлять данные в заголовки запроса через up.request:

up.request('/notifications', {
    target: '#notifications',
    headers: { 'X-User-ID': 42 }
});

Это особенно полезно для передачи метаданных или токенов аутентификации, не влияя на основное тело запроса.

Совместимость с серверными фреймворками

Unpoly не требует специальных настроек сервера: данные приходят в стандартных форматах application/x-www-form-urlencoded или multipart/form-data для форм, а для JSON-запросов — application/json. Современные фреймворки, такие как Rails, Django, Laravel, Node.js, автоматически распознают переданные параметры.

Использование up-params для повторного применения данных

up-params позволяет сохранять параметры запроса для повторного использования при последующих действиях, например при пагинации или фильтрации:

<a href="/products?page=2" up-target="#product-list" up-params="#filters">
    Следующая страница
</a>

Здесь параметры фильтра будут автоматически объединены с URL для корректной передачи на сервер.

Особенности передачи массивов и вложенных структур

При работе с массивами важно учитывать формат ключей. Например, для передачи массива:

up.request('/tags', {
    target: '#tag-list',
    params: { tags: ['javascript', 'unpoly', 'ajax'] }
});

На сервере это будет интерпретировано как массив tags[]. Для вложенных объектов используется точечная или вложенная структура ключей, в зависимости от сервера.

Кэширование и управление состоянием

Unpoly позволяет управлять состоянием передаваемых данных через up.history. Параметры, отправленные с запросом, могут сохраняться в истории браузера, что облегчает навигацию назад и вперёд без потери фильтров и других динамических значений.

Передача данных в Unpoly сочетает удобство HTML-атрибутов и гибкость программного API. Библиотека автоматически объединяет данные из форм, атрибутов и скриптов, позволяя строить динамичные страницы с минимальным количеством ручного кода и сохранением полной совместимости с серверной логикой.

Оглавление