Использование метода POST вместо GET в гиперссылках

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

Затрудняетесь представить, что гиперссылки способны инициировать POST-запросы? Используйте скрытую форму и JavaScript, чтобы сделать это. Рассмотрим пример:

<form action="/my-endpoint" method="post" id="secretKey" style="display: none;">
    <input type="hidden" name="key1" value="value1"/>
</form>
<a href="#" onclick="document.getElementById('secretKey').submit();">Ссылка для отправки POST-запроса</a>

Как волшебством, одним кликом по ссылке отправится POST-запрос на URL /my-endpoint с данными key1=value1, которые остаются скрытыми.

С помощью JavaScript обходчик

Лучше инкапсулировать подобные задачи в функциях, чтобы сделать код более изящным. Вот как JavaScript превращает обычные формы в источники для создания POST-запросов:

function postLink(url, data) {
  const formElement = document.createElement('form');
  formElement.method = 'post';
  formElement.action = url;

  Object.keys(data).forEach(key => {
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = key;
    hiddenInput.value = data[key];
    formElement.appendChild(hiddenInput);
  });
  
  document.body.appendChild(formElement);
  formElement.submit();
}

Теперь для отправки запроса достаточно вызвать postLink('endpoint', { myKey: 'myValue' }).

Комбинирование с CSS

С помощью CSS можно сделать так, чтобы элемент выглядел как традиционная гиперссылка:

.post-as-link {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

Применяйте этот класс к элементу, который должен выглядеть как гиперссылка.

Визуализация (с эмодзи)

Трансформация GET-запроса в POST по смыслу может быть представлена следующей визуальной метафорой:

GET : 🐦 Публичное твитнуть сообщение.
POST : 📨 Закрытое отправление личного сообщения друзьям.

Пример использования GET-запроса:

Old-GET: 😃📢 Общедоступно просит "Принесите мне книгу о Гарри Поттере 📘"

А вот как это будет выглядеть через POST-запрос:

<form action="/librarian" method="post">
  <input type="hidden" name="book" value="📘">
  <a href="#" onclick="this.closest('form').submit();return false;">Заказать книгу</a>
</form>

За кулисами POST-запрос выглядит вот так:

New-POST: 😃📨 Тайно передает записку '📘' библиотекарю.

Все выполнено утонченно и дискретно! 🕵️‍♀️🔐

jQuery добавляет удобство

Если вы предпочитаете работать с jQuery, отправить форму можно с его помощью:

$('a#myLinkId').click(function(e) {
  e.preventDefault();
  $.post('/my-endpoint', { key1: 'value1' }, function(response) {
    // Профессиональная обработка ответа
  });
});

Теперь клик по ссылке инициирует POST-запрос с использованием функции $.post().

Открытие ответа в новой вкладке

Хотите, чтобы результат POST-запроса открывался в новой вкладке? Атрибут target="_blank" позволяет сделать это:

<form action="/my-endpoint" method="post" target="_blank">
    <input type="hidden" name="key1" value="value1"/>
</form>
<a href="#" onclick="this.previousElementSibling.submit();return false;">Открыть в новой вкладке!</a>

Клик по ссылке откроет результат запроса в новом окне браузера.

Возвращение к серверной стороне

Важно убедиться, что обработчики запросов на стороне сервера настроены на прием POST-запросов. Также они должны корректно считывать данные из тела запроса, а не из URL.

По шагам с XMLHttpRequest

Для полного контроля над процессом отправки формы можно использовать XMLHttpRequest:

let xhr = new XMLHttpRequest();
xhr.open('POST', '/my-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    // Задача выполнена!
  }
};
xhr.send('key1=value1');

Немаловажное предупреждение

Несмотря на то, что данные в POST-запросах не отображаются в URL, это не обеспечивает их полную конфиденциальность. На сервере всегда следует тщательно проверять и очищать данные формы.

Полезные ресурсы

1. Формы HTML с методом POST – MDN Web Docs
2. Процесс отправки и приема данных форм – MDN
3. Использование Fetch API для отправки HTTP-запросов – MDN
4. Асинхронные POST-запросы с помощью AJAX
5. HTTP-метод POST и другие методы – MDN

Завершение

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

Если вам понравилась статья, не забудьте поддержать нас лайком. Приятного POSTинга!👨‍💻