Использование метода 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, это не обеспечивает их полную конфиденциальность. На сервере всегда следует тщательно проверять и очищать данные формы.
Полезные ресурсы
- Формы HTML с методом POST – MDN Web Docs
- Процесс отправки и приема данных форм – MDN
- Использование Fetch API для отправки HTTP-запросов – MDN
- Асинхронные POST-запросы с помощью AJAX
- HTTP-метод POST и другие методы – MDN
Завершение
Подводя итог, можно утверждать, что овладев этим практическим навыком, вы вольетесь в профессиональное сообщество разработчиков, являющихся настоящими почтальонами в мире веб-технологий!
Если вам понравилась статья, не забудьте поддержать нас лайком. Приятного POSTинга!👨💻