Как отправить post запрос из браузера
Обновлено: 30.06.2024
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Во время обычной отправки формы <form> браузер собирает значения её полей, делает из них строку и составляет тело GET/POST-запроса для посылки на сервер.
Кодировка 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-запрос
Например, для посылки GET-запроса с параметрами name и surname , аналогично форме выше, их необходимо закодировать так:
Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок, например такой:
POST с urlencoded
В методе POST параметры передаются не в URL, а в теле запроса. Оно указывается в вызове send(body) .
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
В зависимости от enctype браузер кодирует данные соответствующим способом перед отправкой на сервер.
В частности, при 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
Достаточно указать в заголовке Content-Type кодировку и границу, и далее сформировать тело запроса, удовлетворяющее требованиям кодировки.
Пример кода для того же запроса, что и раньше, теперь в кодировке multipart/form-data :
Тело запроса будет иметь вид, описанный выше, то есть поля через разделитель.
Можно создать запрос, который сервер воспримет как загрузку файла.
Для добавления файла нужно использовать тот же код, что выше, модифицировав заголовки перед полем, которое является файлом, так:
FormData
Современные браузеры, исключая IE9- (впрочем, есть полифил), поддерживают встроенный объект FormData, который кодирует формы для отправки на сервер.
Это очень удобно. Например:
Этот код отправит на сервер форму с полями name , surname и patronym .
- Конструктор new FormData([form]) вызывается либо без аргументов, либо с DOM-элементом формы.
- Метод formData.append(name, value) добавляет данные к форме.
Другие кодировки
Поэтому для обмена данными часто используется формат 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 .
В уроке покажу, как использовать POST-запросы для передачи данных на сервер. Разработаем WEB-сервер, обрабатывающий методы GET и POST. Узнаем, как формировать POST-запросы с помощью HTML-формы.
Главное достоинство GET-запросов – компактность. В одной строке адресная информация и передаваемые данные. А с помощью POST-запросов информация прячется где-то внутри запроса. Она недоступна простому пользователю.
Из этого вытекают все плюсы и минусы обоих методов. Достоинства и недостатки GET и POST-запросов зеркально-противоположные.
Каким способом передавать данные на сервер выбирать вам.
Но обратите внимание на последнюю строку таблицы. У WEB-сервера, реализованного на микроконтроллере, вычислительные ресурсы крайне ограничены.
И еще учтите, что GET-запросы должен обрабатывать любой WEB-сервер, а POST-запросы придется обрабатывать только для приема данных. Добавить обработку URI в GET-запросе намного проще, чем добавить на сервер еще один метод. Вы это прочувствуете ниже, при реализации сервера.
Формализованная постановка задачи.
Мы собираемся разработать WEB-сервер, работающий по следующему алгоритму:
Формирование POST-запросов средствами HTML. HTML-формы.
В HTML существует интерактивный элемент, позволяющий производить передачу данных на сервер. Это форма. Вы встречались с формой, когда регистрировались на сайте, писали комментарии и во многих других случаях.
HTML-форма – это поле, раздел документа, дающий пользователю возможность вводить информацию для передачи на сервер. Передача может происходить как GET, так и POST-запросами. Сейчас нас интересует второй метод.
Я приведу минимальный объем информации для работы с формами. Все остальное найдете в учебниках по HTML.
Форма – блочный элемент. Все элементы формы заключаются в теги:
У формы несколько необязательных атрибутов и два обязательных:
- action - содержит URI обработчика формы, т.е. сервера;
- method – метод отправки данных post или get.
Можно добавить атрибут name – имя формы.
<form action="http://192.168.1.10" method="post" name="form">
Остается добавить нужные элементы формы.
Основной элемент - <input атрибуты> .
Позволяет создавать различные поля для ввода числовой и текстовой информации.
Нужных нам атрибута 3:
Другие элементы формы.
| Элемент, формат | Описание | Вид |
| <textarea> </textarea> | Многострочный текст, изменяется размер поля. |  |
| <select> </select> | Выпадающий список. |
С помощью любого текстового редактора, например Notepad, напишем простую HTML-форму регистрации.
<form action="http://192.168.1.10" method="post" name="form">
<br>
Имя: <input name="fname" type="text" value=""><br><br>
Фамилия: <input name="sname" type="text" value=""><br><br>
Возраст: <input name="age" type="number" value=""><br><br>
Пол:
М <input name="sex" type="radio" value="male">
Ж <input name="sex" type="radio" value="female"><br><br>
Любимый вид спорта:
<select name="sport">
<option value="Football"> Футбол
<option value="Volleyball"> Волейбол
<option value="Basketball"> Баскетбол
<option value="Swimming"> Плавание
<option value="Nothing"> Нет
</select><br><br>
Сохраним в файле с именем TestForm.html.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
В ней: текстовые поля, поля для чисел, переключатель, выпадающий список, многострочный текст и кнопка отправки данных.
Запустим файл из любого браузера.
Теперь мы можем отправлять POST-запросы из браузера.
Формат данных в POST-запросах.
Посмотрим, как данные передаются в запросе. Будем использовать программу вывода данных TCP-пакета в последовательный порт, написанную еще в уроке 70.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
Я заполнил форму на английском языке, для того чтобы было проще увидеть значения переменных. При использовании кириллицы символы передавались бы кодами в текстовом виде. Ниже я приведу пример.
В мониторе последовательного порта появится текст POST-запроса.
В нем переданы значения переменных формы. Формат:
- Имя_элемента это имя, заданное для элемента в HTML-форме.
- Значение, то, что будет набрано в форме или то, что соответствует выбранному значению для переключателей, выпадающих списков и т.п.
- Символ & разделяет переменные.
Для ввода имени мы создали объект: <input name="fname" type="text" value=""> ,
назвали его: fname,
набрали в форме: Ivan,
получили: fname=Ivan.
Для выбора пола создали переключатель: <input name="sex" type="radio" value="male"> ,
назвали: sex (это по-английски пол, а не то, что вы подумали),
выбрали в форме: мужской,
получили: sex=male.
Если заполнить форму на русском языке полностью, то данные POST-запроса будут выглядеть так.
Обработка POST-запроса. Разработка WEB-сервера.
Давайте для начала выделим данные POST-запроса в текстовую строку. Для контроля выведем ее в последовательный порт.
Программы WEB-серверов из предыдущих уроков при приеме запроса подвешивали программу.
void loop()
client = server.available(); // ожидаем объект клиент
if (client)
while (client.connected())
if (client.available())
// з десь программа обрабатывает очередной символ
>
// здесь программа ожидает символ
// т.е. висит пока не будет обработан весь запрос
>
>
// при обработке запроса сюда программа не доходит
>
Давайте покажем класс и напишем программу, которая будет обрабатывать запрос параллельным процессом. Т.е. при приеме данных она не будет подвешивать контроллер. Цикл loop все время будет доходить до конца.
При получении запроса программа будет принимать данные, и формировать флаг requestRecieved (признак запрос принят). А в основном цикле мы будем анализировать этот признак и при его активном состоянии выводить в последовательный порт полученные данные.
// проверка признака запроса
if( requestRecieved == true )
requestRecieved= false;
Serial.println();
Serial.println(F("POST-request recieved"));
Serial.println(dataPost); // вывод данных
>
>
Перед тем, как читать урок дальше лучше загрузите полный скетч первого варианта сервера.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
Программа реализована по принципу пошагового автомата. Таким образом мы разрабатывали охранную сигнализацию в уроке 17.
Основной скелет программы представляет собой блоки, через которые проходит программа в зависимости от переменной mode. Например, если mode=1, то цикл loop будет проходить через блок “определение типа запроса GET или POST”. Для того, чтобы переключиться на другой блок достаточно занести соответствующее значение в переменную mode. Переменная mode, как бы запоминает, какую операцию в данный момент выполняет программа.
Программа пока не закончена. Проверим, как она работает. Я загрузил скетч в плату, открыл монитор порта. Запустил на компьютере код HTML-формы и заполнил форму теми же данными на мифического Иванова.
GET-запросы наш сервер тоже определяет.
Выделить из полученной строки переменные уже не сложно.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
До этого момента мы запускали на компьютере код HTML-формы, а потом формировали POST-запрос. Давайте сделаем так, чтобы форма появлялась в браузере из нашего сервера.
Для этого необходимо в обработку GET-запроса вставить отсылку клиенту кода формы TestForm.html. Не забыть экранировать кавычки.
Полный скетч сервера:
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
В окне браузера появляется форма регистрации, полученная уже с нашего сервера.
Заполняем, отсылаем данные на сервер. У меня все работает.
Я установил такой ответ клиенту на POST-запрос:
Сервер не закрывает сессию на POST-запрос и продолжает принимать новые пакеты. Т.е. обратившись к серверу, мы получаем в браузере форму и можем, не прерывая сессию многократно отсылать данные. Получается управление сервером в реальном времени. При этом ничто не мешает нам опять обратиться к серверу с GET-запросом и получить от него форму заново.
Если нужен алгоритм, при котором после отсылки данных на сервер надо закрыть соединение, то ответ клиенту на POST-запросы должен выглядеть так:
Последний штрих – ответ клиенту на ошибочный запрос кодом 400 (неверный запрос).
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
Мы создали работоспособный WEB-сервер. Еще раз подчеркну, что сервер работает параллельным процессом. В конце цикла loop можно выполнять другие действия, конечно, которые надолго не подвешивают программу.
Есть ли какие-то функции в Chrome и / или Firefox, которых мне не хватает?
Я делаю приложение Chrome под названием Postman для подобных вещей. Все остальные расширения казались немного устаревшими, поэтому я сделал свои собственные. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.
Postman теперь также имеет собственные приложения (т.е. автономные) для Windows, Mac и Linux! Сейчас предпочтительнее использовать собственные приложения, подробнее см. здесь.
CURL УДИВИТЕЛЬНЫЙ, чтобы делать то, что вы хотите! Это простой, но эффективный инструмент командной строки.
Команды тестирования реализации отдыха:
Если вы настаиваете на расширении браузера, то:
Chrome :
Firefox :
С формой, просто установите method на "post"
Т.е. создайте себе очень простую страницу для проверки действий публикации.
Вот расширение Advanced REST Client для Chrome.
У меня он отлично работает - помните, что вы все еще можете использовать с ним отладчик. Панель «Сеть» особенно полезна; он предоставит вам обработанные объекты JSON и страницы ошибок.
Для firefox есть также неплохое расширение RESTClient:
Может не иметь прямого отношения к браузерам, но fiddler - еще одно хорошее программное обеспечение.
Просто чтобы дать свои 2 цента за этот ответ, после повышения уровня Postman появились и другие клиенты, о которых стоит упомянуть здесь:
-
: с приложением для ПК и плагин Chrome : ранее известная как Postwoman, и с также доступен плагин Chrome. Вы также можете заставить его работать локально с помощью Docker, если хотите подшутить : если вы используете Mac : уже упоминается как Chrome plugin, но стоит отметить, что в нем также есть настольное приложение : написан на java и с большим количеством функций тестирования. : еще один способ тестирования API. Он поставляется с интеграцией SOAP и имеет плагин Chrome доступен
Вы можете отправлять запросы прямо из браузера с помощью ReqBin. Никаких плагинов или настольных приложений не требуется.
Здесь есть хороший простой пример Fetch API здесь
Некоторые из преимуществ команды fetch действительно ценны: она проста, коротка, быстра, доступна и даже в качестве консольной команды она хранится на вашей консоли Chrome и может использоваться позже.
Простота нажатия F12, написания команды на вкладке консоли (или нажатия клавиши «вверх», если вы ее использовали раньше), а затем нажатия клавиши ввода, ожидания и возврата ответа - вот что делает ее действительно полезной для простых тестов на отправку запросов.
Конечно, основным недостатком здесь является то, что, в отличие от Postman, он не передает политику перекрестного происхождения, но все же я считаю его очень полезным для тестирования в локальной среде или других средах, где я могу включить CORS вручную.
Предварительные сведения
Используя ключ -v , можно увидеть, какие именно команды curl отсылает серверу. Этот ключ дает возможность разобраться в особенностях взаимодействия curl и веб-сервера и помогает отладить запрос.
Формы
Справка
Справку по curl можно получить, набрав в командной строке
$ — приглашение командной строки.
Получить содержимое страницы (GET)
вы получите веб-страницу, выведенную в окно терминала (точнее, в стандартный вывод). Чтобы сохранить эту страницу в файл curl.html , нужно указать
Форма запроса может использовать метод GET. Например, так:
Для формирования GET-запроса, введите то, что ожидалось от формы:
Метод POST
Форма, генерирующая POST-запрос, отличается от предыдущей лишь методом отправки:
curl сформирует POST-запрос с теми же данными следующим образом:
Обратите внимание на то, что данные, которые вы отправляете серверу, должны быть правильно закодированы. curl не сделает этого за вас. К примеру, если вы хотите, чтобы данные содержали пробел, то вам нужно заменить этот пробел на %20 и т. п. Это одна из самых распространенных ошибок, в результате чего данные передаются не так, как нужно.
Загрузка файлов с помощью POST
Форма, с помощью которой пользователь может загрузить файл, выглядит примерно так:
Заметьте, что тип содержимого Content-Type установлен в multipart/form-data .
Чтобы с помощью curl отослать данные в такую форму, введите:
Скрытые поля формы
Скрытые поля в формах являются одним из наиболее распространенных способов передачи информации о состоянии HTML-приложения. Такие поля не заполняются, они невидимы для пользователя, но передаются так же, как и обычные поля.
Пример формы с одним видимым и одним скрытым полями:
Как выглядит POST-запрос "изнутри"
Когда с помощью curl вы заполняете форму и отсылаете ее данные на сервер, вы наверняка хотите, чтобы сформированный curl POST-запрос выглядел так же, как если бы он был выполнен с помощью браузера.
Простейший способ увидеть свой POST-запрос заключается в следующем:
Вы увидите, что данные присоединились к URL и разделены символами ? , как это и предполагается при использовании GET-форм.
Комментарии
Дмитрий Храмов
Компьютерное моделирование и все, что с ним связано: сбор данных, их анализ, разработка математических моделей, софт для моделирования, визуализации и оформления публикаций. Ну и за жизнь немного.
Читайте также: