Использование методов PUT и DELETE в формах: преимущества

Быстрый ответ

HTML-формы изначально поддерживают только методы GET и POST. Но вполне возможно имитировать запросы PUT и DELETE с помощью JavaScript, отлавливая событие отправки формы и выполняя AJAX-запрос. Кроме того, можно воспользоваться скрытым полем формы, которое сервер будет воспринимать как указание на необходимый HTTP-метод.

Пример AJAX-запроса методом DELETE:

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault(); // Останавливаем стандартное действие формы
  fetch('/resource', { method: 'DELETE' }) // "Тебе здесь не рады!" – великий Гэндальф
    .then(res => res.json()) // Обрабатываем успешный ответ
    .catch(err => console.error(err)); // В случае ошибки выводим информацию в консоль
});

Вот как мог бы выглядеть имитированный запрос PUT с использованием скрытого поля формы:

<form method="POST" action="/update-resource">
  <input type="hidden" name="_method" value="PUT">
  <!-- здесь располагаются остальные поля формы... -->
</form>

В этом случае сервер должен обработать значение _method, чтобы действительно применить HTTP-метод.

Когда стоит использовать PUT и DELETE?

PUT и DELETE являются важными элементами RESTful-архитектуры, хоть и не поддерживаются HTML-формами напрямую. Правильное их использование, особенно в сочетании с AJAX, может улучшить функциональность и удобство работы вашего веб-приложения:

• PUT используется для обновления данных ресурсов.
• DELETE служит для их удаления.

Оба эти метода предполагают одинаковый результат при последующих запросах, что актуально при нестабильных сетевых соединениях.

Middleware и серверные настройки

Серверные middleware, такие как модуль method-override для Express.js или встроенные функции Ruby on Rails могут обойти ограничения применения PUT и DELETE в HTML-формах, правильно интерпретируя поле _method. Но перед тем как их применять, убедитесь, что ваш сервер может принимать эти методы, иначе он может не обработать запрос.

Визуализация

Забудем о сложных аналогиях:

Работа HTML-формы оперирует двумя действиями:

• GET для получения данных.
• POST для добавления новых данных.

Теперь, чтобы обновлять или удалять данные — PUT и DELETE соответственно — требуется некоторая дополнительная "магия".

Актуализируйте свой код

Спецификации HTML постоянно обновляются. Пока PUT и DELETE недоступны напрямую, важно мониторить последние изменения спецификации HTML5.

Библиотеки, такие как jQuery, облегчают работу с AJAX. Если вы стремитесь к совершенству, ознакомьтесь с официальной документацией jQuery.ajax().

Применение PUT и DELETE обогащает принципы REST, добавляет семантическую полноту приложению и облегчает его поддержку.

Баланс практичности

Решение между PUT/DELETE и более традиционными методами — это вопрос компромисса. Они позволяют приложению соблюдать принципы RESTful-архитектуры, но также стоит учесть такие моменты, как совместимость с браузерами и сложность реализации.

Преимущества:

• Четкость операций и удобство их идентификации.
• Простота отладки и обновления кода.
• Соблюдение принципов RESTful-архитектуры.

Компромиссы:

• Ограниченная поддержка методов GET и POST.
• AJAX требует дополнительного кода на JavaScript.
• Сервер могут потребовать дополнительной настройки.

Для улучшения пользовательского опыта рекомендуется учитывать такие моменты, как редирект после AJAX-запросов, обработка ошибок и предоставление альтернатив для пользователей без поддержки JavaScript.

Полезные материалы

1. Веб-формы — работа с пользовательскими данными
2. Различия между PUT и POST в REST API
3. Использование Fetch API
4. Клиентская валидация форм
5. HTTP-методы для RESTful-сервисов
6. HTML Стандарт