Как отправить post запрос из браузера

Отправка POST-запросов в jquery с помощью метода post, его параметры и примеры использования, отправка данных формы

Как отправить post запрос из браузера

HTTP-метод POST предназначен для отправки данных на сервер. Тип тела запроса указывается в заголовке Content-Type.

Разница между PUT и POST состоит в том, что PUT является идемпотентным: повторное его применение даёт тот же результат, что и при первом применении (то есть у метода нет побочных эффектов), тогда как повторный вызов одного и того же метода POST может иметь такие эффекты, как например, оформление одного и того же заказа несколько раз.

Запрос POST обычно отправляется через форму HTML и приводит к изменению на сервере. В этом случае тип содержимого выбирается путём размещения соответствующей строки в атрибуте enctype элемента или formenctype атрибута элементов или:

• application/x-www-form-urlencoded: значения кодируются в кортежах с ключом, разделённых символом ‘&’, с ‘=’ между ключом и значением. Не буквенно-цифровые символы — percent encoded: это причина, по которой этот тип не подходит для использования с двоичными данными (вместо этого используйте multipart/form-data )
• multipart/form-data: каждое значение посылается как блок данных ("body part"), с заданными пользовательским клиентом разделителем ("boundary"), разделяющим каждую часть. Эти ключи даются в заголовки Content-Disposition каждой части
• text/plain

Когда запрос POST отправляется с помощью метода, отличного от HTML-формы, — например, через XMLHttpRequest — тело может принимать любой тип. Как описано в спецификации HTTP 1.1, POST предназначен для обеспечения единообразного метода для покрытия следующих функций:

Как передать параметры в GET запросе?

• Аннотация существующих ресурсов
• Публикация сообщения на доске объявлений, в новостной группе, в списке рассылки или в аналогичной группе статей;
• Добавление нового пользователя посредством модальности регистрации;
• Предоставление блока данных, например, результата отправки формы, процессу обработки данных;
• Расширение базы данных с помощью операции добавления.

Запрос имеет тело Успешный ответ имеет тело Безопасный Идемпотентный Кешируемый Допускается в HTML-формах

Да

Да

Нет

Нет

Только если включена информация о свежести сообщения

Да

Синтаксис

Пример

Простая форма запроса, используя стандартный application/x-www-form-urlencoded content type:

POST — запрос передает данные в теле сообщения запроса. Главное достоинство GET- запросов – компактность. В одной строке адресная информация и передаваемые данные. А с помощью POST — запросов информация прячется где-то внутри запроса. Сначала будем запускать его из браузера, а затем перенесем на сервер в сообщение ответа на GET- запрос. Формирование POST — запросов средствами HTML. HTML-формы. Теперь мы можем отправлять POST — запросы из браузера. Формат данных в POST — запросах. Посмотрим, как данные передаются в запросе. Будем использовать программу вывода данных TCP-пакета в последовательный порт, написанную еще в уроке 70. Зарегистрируйтесь и оплатите.

Как отправить post запрос из браузера

В отличие от GET-запросов данные POST-запросов передаются не в строке запроса, а в его теле. Распространенным примеров подобных запросов является отправка данных формы на сервер.

Для отправки POST-запросов предназначен метод post. Его объявление и использование в целом аналогично методу get. Он принимает следующие параметры:

url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос

data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом

success(data, textStatus, jqXHR): необязательный параметр — функция обратного вызова, которая будет выполняться при успешном выполнении запроса. Она может принимать три параметра: data — данные, полученные с сервера, textStatus — — статус запроса и jqXHR — специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.

dataType: необязательный параметр, содержащий тип данных в виде строки, например, "xml" или "json"

На выходе метод post возвращает объект jqXHR.

В данном случае мы передаем в качестве данных пароль и логин. На сервере мы можем получить данные и отправить ответ пользователю:

Поскольку наиболее часто запрос post используется при отправке данных формы, используем на стороне клиента форму:

Итак, серверная часть, к которой будет обращаться форма — файл ajax.php — у нас остается той же. Только в данном случае теперь для параметра data в методе post мы данные берем из полей на этой форме.

Обратите внимание, что мы блокируем обычную отправку формы ( event.preventDefault(); ), иначе у нас бы шла переадресация.

Сериализация формы

Посколкьу нередко формы не ограничиваются двумя полями, то проще применять сериализацию формы. Сериализация производится посредством метода serialize и в качестве результата создает объект javascript, где свойствам соответствуют поля формы. И значения хранят эти свойства те же, что имеют соответственные поля формы.

Итак, применим сеиализацию формы:

В отличие от предыдущего примера у нас здесь два отличия. Во-первых, обратите внимание, что поля для ввода имеют атрибут name. При указании параметра data мы производим сериализацию данных формы через метод serialize: $("#loginForm").serialize(). В данном методе в тело запроса передаются параметры. Причем имена параметров — это значения атрибутов name полей ввода. А значения параметров — соответственно введенные значения в текстовые поля.

И поэтому с помощью php мы можем извлечь эти значения: $login=$_POST[‘login’].

Отправка POST — запросов в jquery с помощью метода post, его параметры и примеры использования, отправка данных формы. Для отправки POST — запросов предназначен метод post. Его объявление и использование в целом аналогично методу get. Он принимает следующие параметры: url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос. data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом. success(data, textStatus, jqXHR): необязательный параметр — функция обратного вызова, которая будет выполняться при успешном выполнении запроса.

XMLHttpRequest POST, формы и кодировка

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.

Во время обычной отправки формы браузер собирает значения её полей, делает из них строку и составляет тело GET/POST-запроса для посылки на сервер.

При отправке данных через XMLHttpRequest, это нужно делать самим, в JS-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.

Кодировка urlencoded

Основной способ кодировки запросов – это urlencoded, то есть – стандартное кодирование URL.

Здесь есть два поля: name=Ivan и surname=Ivanov.

Браузер перечисляет такие пары «имя=значение» через символ амперсанда & и, так как метод GET, итоговый запрос выглядит как /submit?name=Ivan&surname=Ivanov.

Все символы, кроме английских букв, цифр и — _. ! ~ * ‘ ( ) заменяются на их цифровой код в UTF-8 со знаком %.

Например, пробел заменяется на %20, символ / на %2F, русские буквы кодируются двумя байтами в UTF-8, поэтому, к примеру, Ц заменится на %D0%A6.

Будет отправлена так: /submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9.

в JavaScript есть функция encodeURIComponent для получения такой кодировки «вручную»:

Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше.

GET-запрос

Формируя XMLHttpRequest, мы должны формировать запрос «руками», кодируя поля функцией encodeURIComponent.

Например, для посылки GET-запроса с параметрами name и surname, аналогично форме выше, их необходимо закодировать так:

Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как Content-Length и Connection.

По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например Referer. Это сделано в целях контроля правильности запроса и для безопасности.

Запрос, отправленный кодом выше через XMLHttpRequest, никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить.

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

POST с urlencoded

В методе POST параметры передаются не в URL, а в теле запроса. Оно указывается в вызове send(body).

В стандартных HTTP-формах для метода POST доступны три кодировки, задаваемые через атрибут enctype:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

В зависимости от enctype браузер кодирует данные соответствующим способом перед отправкой на сервер.

В случае с XMLHttpRequest мы, вообще говоря, не обязаны использовать ни один из этих способов. Главное, чтобы сервер наш запрос понял. Но обычно проще всего выбрать какой-то из стандартных.

В частности, при POST обязателен заголовок Content-Type, содержащий кодировку. Это указание для сервера – как обрабатывать (раскодировать) пришедший запрос.

Для примера отправим запрос в кодировке application/x-www-form-urlencoded:

Всегда используется только кодировка UTF-8, независимо от языка и кодировки страницы.

Если сервер вдруг ожидает данные в другой кодировке, к примеру windows-1251, то их нужно будет перекодировать.

Кодировка multipart/form-data

Кодировка urlencoded за счёт замены символов на %код может сильно «раздуть» общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: multipart/form-data.

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

Чтобы использовать этот способ, нужно указать его в атрибуте enctype и метод должен быть POST:

Форма при такой кодировке будет выглядеть примерно так:

…То есть, поля передаются одно за другим, значения не кодируются, а чтобы было чётко понятно, какое значение где – поля разделены случайно сгенерированной строкой, которую называют «boundary» (англ. граница), в примере выше это RaNdOmDeLiMiTeR:

Сервер видит заголовок Content-Type: multipart/form-data, читает из него границу и раскодирует поля формы.

Такой способ используется в первую очередь при пересылке файлов, так перекодировка мегабайтов через urlencoded существенно загрузила бы браузер. Да и объём данных после неё сильно вырос бы.

Однако, никто не мешает использовать эту кодировку всегда для POST запросов. Для GET доступна только urlencoded.

POST с multipart/form-data

Сделать POST-запрос в кодировке multipart/form-data можно и через XMLHttpRequest.

Достаточно указать в заголовке Content-Type кодировку и границу, и далее сформировать тело запроса, удовлетворяющее требованиям кодировки.

Пример кода для того же запроса, что и раньше, теперь в кодировке multipart/form-data:

Тело запроса будет иметь вид, описанный выше, то есть поля через разделитель.

Можно создать запрос, который сервер воспримет как загрузку файла.

Для добавления файла нужно использовать тот же код, что выше, модифицировав заголовки перед полем, которое является файлом, так:

FormData

Современные браузеры, исключая IE9- (впрочем, есть полифил), поддерживают встроенный объект FormData, который кодирует формы для отправки на сервер.

Это очень удобно. Например:

Этот код отправит на сервер форму с полями name, surname и patronym.

• Конструктор new FormData([form]) вызывается либо без аргументов, либо с DOM-элементом формы.
• Метод formData.append(name, value) добавляет данные к форме.

Объект formData можно сразу отсылать, интеграция FormData с XMLHttpRequest встроена в браузер. Кодировка при этом будет multipart/form-data.

Другие кодировки

XMLHttpRequest сам по себе не ограничивает кодировку и формат пересылаемых данных.

Поэтому для обмена данными часто используется формат JSON:

Итого

• У форм есть две основные кодировки: application/x-www-form-urlencoded – по умолчанию и multipart/form-data – для POST запросов, если явно указана в enctype. Вторая кодировка обычно используется для больших данных и только для тела запроса.
• Для составления запроса в application/x-www-form-urlencoded используется функция encodeURIComponent.
• Для отправки запроса в multipart/form-data – объект FormData.
• Для обмена данными JS ↔ сервер можно использовать и просто JSON, желательно с указанием кодировки в заголовке Content-Type.

В XMLHttpRequest можно использовать и другие HTTP-методы, например PUT, DELETE, TRACE. К ним применимы все те же принципы, что описаны выше.

Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как Content-Length и Connection. По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например Referer. Это сделано в целях контроля правильности запроса и для безопасности. Сообщаем про AJAX. Запрос, отправленный кодом выше через XMLHttpRequest, никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить. Сделать POST — запрос в кодировке multipart/form-data можно и через XMLHttpRequest.