Отправить POST данные при нажатии на ссылку, отличия методов GET и POST

13.07.18 ИТ / HTML 11525

При разработке сайта, обычно возникает потребность отправки тех или иных данных на сервер, на сегодняшний день самыми популярными методами запроса для отправки таких данных являются методы GET и POST. Существуют еще и другие методы, например, PUT и DELETE – но они малоиспользуемые.

Самый простой в использовании метод – это конечно же GET. Он используется при большинстве запросов страниц сайта, к примеру, при их просмотре через браузер. Когда пользователь набирает адрес в строке или нажимает на ссылку на сайте – с большой долей вероятности используется метод GET. Этот метод можно использовать для отправки небольших данных, например, строк текста. Недостаток – все данные видны в строке браузера.

Второй по популярности – метод POST, отличается от GET он расширенными возможностями отправки данных. Часто используется для загрузки файла или получения данных с заполненной веб-формы. Данные отправляются незаметно для пользователя. В отличии от метода GET, POST в основном используется для отправки данных на сервер, в то время как GET чаще применяют для получения информации от сервера. Метод POST следует использовать для отправки конфиденциальных данных.

Кратко рассмотрев отличия методов GET и POST, перейдем к решению задачи отправки данных методом POST при нажатии на ссылку. Такая потребность может часто возникнуть при создании различного функционала на разрабатываемом проекте.

При клике на ссылку, созданную тегом a, нет возможности сменить тип запроса, как это можно сделать при отправки данных формой, созданной тегом form. Ведь в случае с формой, там можно указать атрибут method, тег a же не имеет такого атрибута. Поэтому при отправке данных при клике на ссылку, все данные будут видны в строке браузера, в виде параметров, что несомненно портит вид веб-приложения и отменяет в некотором роде чистые ссылки ЧПУ.

Для решения проблемы отправки данных методов POST, можно использовать обычную форму form с кнопкой input type=submit. Эту кнопку визуально можно сделать похожей на обычную ссылку, при помощи стилей CSS. Задача решена, форма выглядит как обычная ссылка, а данные отправляются незаметно, методом POST. Такой подход часто можно использовать на разных страницах, чтобы избежать создания дополнительных адресов.

Ниже приводится пример:

<style>
	.form-test {
		font: 14px Arial;
	}
	.form-test input {
		font: 14px Arial;
		border: none; 
		padding: 0;
		background: #fff;
		color: #00f;
	}
</style>
<form class="form-test" method="post">
	<input type="hidden" value="data">
	Пример  <input type="submit" value="ссылки">
</form>

В браузере данный код будет выглядеть слежующим образом:

Как видно, это несложное решение для отправки данных методом POST. Таким способом можно отправить различные данные: файлы, текст, сериализованные данные. Правда для отправки файла по клике на ссылку, нужно сначала чтобы пользователь выбрал этот файл у себя на ПК - это также можно сделать, разместив отдельно поле input type=file и связав его с формой атрибутом form у этого тега input. Визуально будет выглядеть как будто элементы не связаны между собой, но будет достигнут нужный результат.

Что касается сериализованных данных, то можно предварительно подготовить их при помощи специальных функций языка, например, на PHP можно использовать json_encode и serialize. После этого, эти данные просто вставляются в скрытое поле формы hidden. Таким способом, например, можно отправить массив PHP методом POST на другую страницу.

В этой статье мы увидели, что методы GET и POST имеют отличия и сходства. Также были показаны примеры, как можно практически любые данные отправить методом POST при клике на ссылку. Это часто может пригодится при разработке различных сайтов и веб-приложений.