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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

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 с использованием скрытого поля формы:

HTML

Скопировать код

<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.