Как отправить post запрос из браузера
Мечта, ради которой создавалась Сеть – это общее информационное пространство, в котором мы общаемся, делясь информацией. Его универсальность является его неотъемлемой частью: ссылка в гипертексте может вести куда угодно, будь то персональная, локальная или глобальная информация, черновик или выверенный текст.
Тим Бернес-Ли, Всемирная паутина: Очень короткая личная история
Протокол
Сервер отвечает по тому же соединению:
Браузер берёт ту часть, что идёт за ответом после пустой строки и показывает её в виде HTML-документа.
Информация, отправленная клиентом, называется запросом. Он начинается со строки:
Первое слово – метод запроса. GET означает, что нам нужно получить определённый ресурс. Другие распространённые методы – DELETE для удаления, PUT для замещения и POST для отправки информации. Заметьте, что сервер не обязан выполнять каждый полученный запрос. Если вы выберете случайный сайт и скажете ему DELETE главную страницу – он, скорее всего, откажется.
Ответ сервера также начинается с версии протокола, за которой идёт статус ответа – сначала код из трёх цифр, затем строчка.
За первой строкой запроса или ответа может идти любое число строк заголовка. Это строки в виде “имя: значение”, которые обозначают дополнительную информацию о запросе или ответе. Эти заголовки были включены в пример:
Content-Length: 65585
Content-Type: text/html
Last-Modified: Wed, 09 Apr 2014 10:48:09 GMT
Тут определяется размер и тип документа, полученного в ответ. В данном случае это HTML-документ размером 65’585 байт. Также тут указано, когда документ был изменён последний раз.
По большей части клиент или сервер определяют, какие заголовки необходимо включать в запрос или ответ, хотя некоторые заголовки обязательны. К примеру, Host, обозначающий имя хоста, должен быть включён в запрос, потому что один сервер может обслуживать много имён хостов на одном ip-адресе, и без этого заголовка сервер не узнает, с каким хостом клиент пытается общаться.
Как мы видели в примере, браузер отправляет запрос, когда мы вводим URL в адресную строку. Когда в полученном HTML документе содержатся упоминания других файлов, такие, как картинки или файлы JavaScript, они тоже запрашиваются с сервера.
Веб-сайт средней руки легко может содержать от 10 до 200 ресурсов. Чтобы иметь возможность запросить их побыстрее, браузеры делают несколько запросов одновременно, а не ждут окончания запросов одного за другим. Такие документы всегда запрашиваются через запросы GET.
На страницах HTML могут быть формы, которые позволяют пользователям вписывать информацию и отправлять её на сервер. Вот пример формы:
Начало строки запроса обозначено знаком вопроса. После этого идут пары имён и значений, соответствующие атрибуту name полей формы и содержимому этих полей. Амперсанд (&) используется для их разделения.
В следующей главе мы вернёмся к формам и поговорим про то, как мы можем делать их при помощи JavaScript.
И всё же имя не полностью бессмысленное. Интерфейс позволяет разбирать вам ответы, как если бы это были документы XML. Смешивать две разные вещи (запрос и разбор ответа) в одну – это, конечно, отвратительный дизайн, но что поделаешь.
Отправка запроса
Можно получить из объекта response и другую информацию. Код статуса доступен в свойстве status, а текст статуса – в statusText. Заголовки можно прочесть из getResponseHeader.
Названия заголовков не чувствительны к регистру. Они обычно пишутся с заглавной буквы в начале каждого слова, например “Content-Type”, но “content-type” или “cOnTeNt-TyPe” будут описывать один и тот же заголовок.
Браузер сам добавит некоторые заголовки, такие, как “Host” и другие, которые нужны серверу, чтобы вычислить размер тела. Но вы можете добавлять свои собственные заголовки методом setRequestHeader. Это нужно для особых случаев и требует содействия сервера, к которому вы обращаетесь – он волен игнорировать заголовки, которые он не умеет обрабатывать.
Асинхронные запросы
В примере запрос был окончен, когда заканчивается вызов send. Это удобно потому, что свойства вроде responseText становятся доступными сразу. Но это значит, что программа наша будет ожидать, пока браузер и сервер общаются меж собой. При плохой связи, слабом сервере или большом файле это может занять длительное время. Это плохо ещё и потому, что никакие обработчики событий не сработают, пока программа находится в режиме ожидания – документ перестанет реагировать на действия пользователя.
Если третьим аргументом open мы передадим true, запрос будет асинхронным. Это значит, что при вызове send запрос ставится в очередь на отправку. Программа продолжает работать, а браузер позаботиться об отправке и получении данных в фоне.
Но пока запрос обрабатывается, мы не получим ответ. Нам нужен механизм оповещения о том, что данные поступили и готовы. Для этого нам нужно будет слушать событие “load”.
Так же, как вызов requestAnimationFrame в главе 15, этот код вынуждает нас использовать асинхронный стиль программирования, оборачивая в функцию тот код, который должен быть выполнен после запроса, и устраивая вызов этой функции в нужное время. Мы вернёмся к этому позже.
Получение данных XML
Мы можем получить такой файл следующим образом:
Документы XML можно использовать для обмена с сервером структурированной информацией. Их форма – вложенные теги – хорошо подходит для хранения большинства данных, ну или по крайней мере лучше, чем текстовые файлы. Интерфейс DOM неуклюж в плане извлечения информации, и XML документы получаются довольно многословными. Обычно лучше общаться при помощи данных в формате JSON, которые проще читать и писать – как программам, так и людям.
Это может мешать разработке систем, которым надо иметь доступ к разным доменам по уважительной причине. К счастью, сервер может включать в ответ следующий заголовок, поясняя браузерам, что запрос может прийти с других доменов:
Абстрагируем запросы
В главе 10 в нашей реализации модульной системы AMD мы использовали гипотетическую функцию backgroundReadFile. Она принимала имя файла и функцию, и вызывала эту функцию после прочтения содержимого файла. Вот простая реализация этой функции:
Аргумент callback (обратный вызов) – термин, часто использующийся для описания подобных функций. Функция обратного вызова передаётся в другой код, чтобы он мог позвать нас обратно позже.
Основная проблема с приведённой обёрткой – обработка ошибок. Когда запрос возвращает код статуса, обозначающий ошибку (от 400 и выше), он ничего не делает. В некоторых случаях это нормально, но представьте, что мы поставили индикатор загрузки на странице, показывающий, что мы получаем информацию. Если запрос не удался, потому что сервер упал или соединение прервано, страница будет делать вид, что она чем-то занята. Пользователь подождёт немного, потом ему надоест и он решит, что сайт какой-то дурацкий.
Обработка ошибок в асинхронном коде ещё сложнее, чем в синхронном. Поскольку нам часто приходится отделять часть работы и размещать её в функции обратного вызова, область видимости блока try теряет смысл. В следующем коде исключение не будет поймано, потому что вызов backgroundReadFile возвращается сразу же. Затем управление уходит из блока try, и функция из него не будет вызвана.
Чтобы обрабатывать неудачные запросы, придётся передавать дополнительную функцию в нашу обёртку, и вызывать её в случае проблем. Другой вариант – использовать соглашение, что если запрос не удался, то в функцию обратного вызова передаётся дополнительный аргумент с описанием проблемы. Пример:
Мы добавили обработчик события error, который сработает при проблеме с вызовом. Также мы вызываем функцию обратного вызова с аргументом error, когда запрос завершается со статусом, говорящим об ошибке.
Код, использующий getURL, должен проверять не возвращена ли ошибка, и обрабатывать её, если она есть.
С исключениями это не помогает. Когда мы совершаем последовательно несколько асинхронных действий, исключение в любой точке цепочки в любом случае (если только вы не обернули каждый обработчик в свой блок try/catch) вывалится на верхнем уровне и прервёт всю цепочку.
Обещания
Тяжело писать асинхронный код для сложных проектов в виде простых обратных вызовов. Очень легко забыть проверку на ошибку или позволить неожиданному исключению резко прервать программу. Кроме того, организация правильной обработки ошибок и проход ошибки через несколько последовательных обратных вызовов очень утомительна.
Предпринималось множество попыток решить эту проблему дополнительными абстракциями. Одна из наиболее удачных попыток называется обещаниями (promises). Обещания оборачивают асинхронное действие в объект, который может передаваться и которому нужно сделать какие-то вещи, когда действие завершается или не удаётся. Такой интерфейс уже стал частью текущей версии JavaScript, а для старых версий его можно использовать в виде библиотеки.
Для создания объекта promises мы вызываем конструктор Promise, задавая ему функцию инициализации асинхронного действия. Конструктор вызывает эту функцию и передаёт ей два аргумента, которые сами также являются функциями. Первая должна вызываться в удачном случае, другая – в неудачном.
И вот наша обёртка для запросов GET, которая на этот раз возвращает обещание. Теперь мы просто назовём его get.
Заметьте, что интерфейс к самой функции упростился. Мы передаём ей URL, а она возвращает обещание. Оно работает как обработчик для выходных данных запроса. У него есть метод then, который вызывается с двумя функциями: одной для обработки успеха, другой – для неудачи.
Пока это всё ещё один из способов выразить то же, что мы уже сделали. Только когда у вас появляется цепь событий, становится видна заметная разница.
Вызов then производит новое обещание, чей результат (значение, передающееся в обработчики успешных результатов) зависит от значения, возвращаемого первой переданной нами в then функцией. Эта функция может вернуть ещё одно обещание, обозначая что проводится дополнительная асинхронная работа. В этом случае обещание, возвращаемое then само по себе будет ждать обещания, возвращённого функцией-обработчиком, и успех или неудача произойдут с таким же значением. Когда функция-обработчик возвращает значение, не являющееся обещанием, обещание, возвращаемое then, становится успешным, в качестве результата используя это значение.
Значит, вы можете использовать then для изменения результата обещания. К примеру, следующая функция возвращает обещание, чей результат – содержимое с данного URL, разобранное как JSON:
Последний вызов then не обозначил обработчик неудач. Это допустимо. Ошибка будет передана в обещание, возвращаемое через then, а ведь это нам и надо – getJSON не знает, что делать, когда что-то идёт не так, но есть надежда, что вызывающий её код это знает.
В качестве примера, показывающего использование обещаний, мы напишем программу, получающую число JSON-файлов с сервера, и показывающую во время исполнения запроса слово «загрузка». Файлы содержат информацию о людях и ссылки на другие файлы с информацией о других людях в свойствах типа отец, мать, супруг.
Можно представлять себе, что интерфейс обещаний – это отдельный язык для асинхронной обработки исполнения программы. Дополнительные вызовы методов и функций, которые нужны для его работы, придают коду несколько странный вид, но не настолько неудобный, как обработка всех ошибок вручную.
При создании системы, в которой программа на JavaScript в браузере (клиентская) общается с серверной программой, можно использовать несколько вариантов моделирования такого общения.
Общепринятый метод – удалённые вызовы процедур. В этой модели общение идёт по шаблону обычных вызовов функций, только функции эти выполняются на другом компьютере. Вызов заключается в создании запроса на сервер, в который входят имя функции и аргументы. Ответ на запрос включает возвращаемое значение.
Данные путешествуют по интернету по длинному и опасному пути. Чтобы добраться до пункта назначения, им надо попрыгать через всякие места, начиная от Wi-Fi сети кофейни до сетей, контролируемых разными организациями и государствами. В любой точке пути их могут прочитать или даже поменять.
Упражнения
Согласование содержания (content negotiation)
Наконец, попробуйте запросить содержимое типа application/rainbows+unicorns и посмотрите, что произойдёт.
Ожидание нескольких обещаний
У конструктора Promise есть метод all, который, получая массив обещаний, возвращает обещание, которое ждёт завершения всех указанных в массиве обещаний. Затем он выдаёт успешный результат и возвращает массив с результатами. Если какие-то из обещаний в массиве завершились неудачно, общее обещание также возвращает неудачу (со значением неудавшегося обещания из массива).
Попробуйте сделать что-либо подобное, написав функцию all.
Заметьте, что после завершения обещания (когда оно либо завершилось успешно, либо с ошибкой), оно не может заново выдать ошибку или успех, и дальнейшие вызовы функции игнорируются. Это может упростить обработку ошибок в вашем обещании.
Есть ли какие-либо расширения или функции в Chrome и / или Firefox, которые мне не хватает?
Сделайте AJAX-вызов в консоли Chrome. Расширение не требуется. Это хороший способ отправлять POST-запросы без необходимости получать файлы cookie для аутентификации. $.post('/resource/path/')
В то время как добавление необходимо, закрытие - чепуха. Он запрашивал функциональность в Chrome или Firefox, или если ему нужен плагин. То, что для этого может потребоваться указанный или неуказанный плагин, не имеет значения
Пост закрыт некорректно. Он не просит инструмента, но для функциональности в инструментах, с которыми автор уже работает. Таким образом, мы должны закрыть все вопросы о том, как сделать то или иное на каком-либо инструменте - и это будет хорошая десятая часть SO.
Я заметил эту функцию в Firefox, когда вы открываете вкладку сети и выбираете случайный запрос, который вы можете Edit and Resend сделать, что довольно круто.
Я делал приложение для Chrome под названием Postman для такого рода вещей. Все остальные расширения выглядели немного устаревшими, поэтому я сделал их самостоятельно. Он также имеет множество других функций, которые были полезны для документирования нашего собственного API здесь.
Почтальон теперь также имеет собственные приложения (то есть автономные) для Windows, Mac и Linux! Сейчас предпочтительнее использовать нативные приложения, читайте больше здесь .
При использовании POST в Postman добавьте свои ключи и значения в тело после выбора x-www-form-urlencoded. @Abhivav Я просто хочу сказать спасибо за отличное приложение. Работает очень хорошо при тестировании RESTful.
Убедитесь, что вы также установили плагин-перехватчик Postman, если хотите использовать куки браузера.
Я с удовольствием читаю этот пост спустя 9 лет и думаю, как почтальон станет неотъемлемой частью жизни разработчиков. Спасибо @Abhinav и команде за его разработку.
CURL УДИВИТЕЛЬНО делать то, что вы хотите! Это простой, но эффективный инструмент командной строки.
Остальные реализации тестовых команд:
Я голосую за это, хотя это неправильный ответ на вопрос: это то, что мне нужно было знать вместо этого.
Это не работает для меня, я не могу использовать одинарные кавычки на OSX с zsh и bash, оболочка переходит в quote> режим. Мне нужно использовать -d "
Fire Fox
Эта функция нарушена для кого-то еще? При редактировании параметров в поле «Строка запроса» после изменения одного символа он отказывается изменять запрос дальше. Единственный способ сделать это помимо этого - отредактировать весь URL / запрос (что сложно, потому что все вместе)
@Coldblackice Можете ли вы опубликовать скриншот или проблемный регистратор шагов? Я могу редактировать строку запроса просто отлично. Чтобы добавить новую строку запроса, я использую & = или просто начинаю новую строку. Чтобы редактировать, измените отдельные k, v или я просто удалите и начните все сначала.
Если вам нужно поле для строки запроса ( ?key=value ), где вы можете вводить пары значений ключа построчно, просто добавьте a ? и букву в URL поле вверху, и Query String поле отобразится.
Если вы настаиваете на расширении браузера, то:
Хром :
Firefox :
@akostadinov Я не могу использовать аддон тестирования ресурсов в Mozilla, инструмент не отображается (даже после установки и перезапуска) под инструментами разработчика в последней версии Firefox.
Только что попробовал REST Easy. Деинсталлируется на месте: интерфейс слишком сильно держит руки и заставляет пользователя использовать жесткие сценарии использования. Не подходит для разработки API.
Перепробовал все предложенное выше для Firefox, но не нашел ничего более удобного, чем Postman для Chrome . REST Easy , кстати, не обрабатывает пустые ответы.
Будучи очень вдохновленным Postman для Chrome , я решил написать нечто подобное для Firefox.
REST Easy * - это перезапускаемое дополнение Firefox, целью которого является максимально возможный контроль над запросами. Надстройка все еще находится в экспериментальном состоянии (она еще даже не проверялась Mozilla), но разработка идет неплохо.
Кажется приятным, но не имеет возможности полностью контролировать тело запроса. В настоящее время он предлагает возможности «ключ / значение», но полный контроль над телом поста был бы неплохим.
@Pacerier: это функция, над которой я сейчас работаю, и она завершена примерно на 90%. Надеюсь, он выйдет до конца года. Похоже, существует отставание в получении аддонов, одобренных Mozilla.
После месяца ожидания новая версия была одобрена. Поддержка PUT и DELETE прибыла! И в этом месяце я также внес множество других новых изменений, которые скоро появятся в следующем выпуске. (Надеюсь, на этот раз он будет одобрен раньше.)
с формой, просто установите method для "post"
Т.е. создайте себе очень простую страницу, чтобы проверить действия поста.
3) Можно ли при передаче http-запроса методом "POST" в теге данные передать не только в теле запроса, но и в URL-е (как происходит при методе "GET")?
4) Можно ли при передаче http-запроса методом "POST" в теге данные передать только в URL-е (как происходит при методе "GET"), но не передавать через тело запроса?
Куда мне это вбивать?
6) Можно ли часть сайта запросить у веб-сервера методом "GET", а остальное методом "POST"? Например, чтобы основная часть html-страницы запрашивалась методом "GET", а форма (тег "form") в ней методом "POST"?
Может я не совсем правильно сформулировал вопрос. Просто меня меня интересует принципиальная разница. Например, я создаю сайт. Я разве не сам задаю, каким методом будет обрабатываться мой запрос, GET или POST? В этом плане касаемо вопроса 2) Если я сам задаю метод, то я могу указать для сайта без формы метод "POST"? Или все же смысл метода "POST", как пишут в интернете, что данные методом "POST" передаются только при отправке формы в теле запроса, но не в URL-e и принимающий сервер просто не обработает такой запрос т.к. нет формы?
3 ответа 3
- Да.
- Да, но не штатными средствами браузера. Только если с помощью инструментов разработчика или другим HTTP-клиентом, коих великое множество во главе с curl . И уж точно не стоит ожидать, что ответ будет таким же, т. к. разные "методы" предполагают совершение с запрашиваемым ресурсом разных действий (обычно GET это чтение, а POST это добавление нового).
- Не совсем. Формально да, но поля, передаваемые в строке запроса, не могут в такой ситуации быть привязаны к полям формы, т. е. не могут быть изменены при пользовательском взаимодействии с веб-страницей (инструменты разработчика, конечно, могут всё). Что в action -атрибуте формы указано, то в строке запроса и уйдёт.
- Из п. 3 следует, что это должна быть форма без полей. Даже у кнопки отправки формы должен отсутствовать атрибут name , иначе она тоже будет считаться полем формы и её значение будет отправлено в теле запроса.
Is there any functionality in Chrome and/or Firefox that I'm missing?
Whilst an add on is necessary, the close is niitpicking nonsense. He was asking for functionality in chrome or firefox , or iif it needs a plugin. That it might require a specifed or unspecified plugin is not the point
The post is closed incorrectly. It does not ask for a tool, but for a functionality in the tools the author already is working with. This way we have to close all questions about how to do this or that on some tool - and it will be a good on-tenth of SO.
I noticed this feature on Firefox when you open the network tab and choose a random request you can Edit and Resend it which is pretty cool.
17 Answers 17
I have been making a Chrome app called Postman for this type of stuff. All the other extensions seemed a bit dated so made my own. It also has a bunch of other features which have been helpful for documenting our own API here.
Postman now also has native apps (i.e. standalone) for Windows, Mac and Linux! It is more preferable now to use native apps, read more here.
Tool might be useful, but a 3rd party app doesn't answer the question, which asks for doing this through Chrome or Firefox.
CURL is awesome to do what you want! It's a simple, but effective, command line tool.
REST implementation test commands:
I'm upvoting this even though it's a wrong answer to the question: it's what I needed to know instead.
This doesn't work for me, I can't use single quotes on OSX with zsh and bash, shell is turning into quote> mode. I need to use -d "
Yeah, curl is awesome, you almost always already have it on Unix, and it's really lightweight for Windows. No registration or SMS! ;)
Windows cmd.exe also doesn't like the single quotes, so for my POST I used: curl -i -X POST -H "Content-Type: application/json" -d "" localhost:60524 \"name\":>
Firefox
Open Network panel in Developer Tools by pressing Ctrl+Shift+E or by going Menubar -> Tools -> Web Developer -> Network. Then Click on small door icon on top-right (in expanded form in the screenshot, you'll find it just left of the highlighted Headers), second row (if you don't see it then reload the page) -> Edit and resend whatever request you want
Is this feature broken for anyone else? When editing the parameters in the "Query String" box, after altering a single character, it refuses to alter the request any further. The only way to do it beyond that is to edit the entire URL/request (which is difficult because it's all smooshed together)
@Coldblackice Can you post a screenshot or problem steps recorder please? I can edit query string just fine. To add a new query string, I either use &= or just start a new line. To edit, change individual k,v or I just delete and start over.
@dima-lituiev, The screenshots above are for Firefox and I've confirmed it works in firefox version 88.0.1
I've also confirmed it works in Firefox 88.0.1 - However, in my case, the "Edit and Resend" button is not showing up. I have to right-click on the request then click "Open in Network Panel". From there, I am able to click the "Resend" dropdown in the upper right and select "Edit and Resend". Kudos to this solution going strong years later. You even have an option for it to create a fetch() command for the request to use in the console like OP was initially requesting.
If you insist on a browser extension then:
Chrome:
Firefox:
@akostadinov i am unable to use resource test addon in mozilla the tool does not appear (even after installaion and restart) to me under developer tools in the lastest version of firefox.
Just tried REST Easy. Uninstalled on the spot: the interface does way too much hand-holding and forces the user into rigid use cases. Not good for API development.
Having been greatly inspired by Postman for Chrome, I decided to write something similar for Firefox.
REST Easy* is a restartless Firefox add-on that aims to provide as much control as possible over requests. The add-on is still in an experimental state (it hasn't even been reviewed by Mozilla yet) but development is progressing nicely.
Seems nice, but lacks the ability to control the request body fully. Currently, it offers key/value abilities, but full control of the post body would be nice.
@Pacerier: it's a feature I'm currently working on and am about 90% complete. Hopefully it will be released before the end of the year. There does seem to be a backlog getting addons approved by Mozilla.
After over a month of waiting, the new version has been approved. PUT and DELETE support has arrived! And in that month, I've also made a ton of other new changes that will show up soon in the next release. (Hopefully it gets approved sooner this time.)
You specifically asked for "extension or functionality in Chrome and/or Firefox", which the answers you have already received provide, but I do like the simplicity of oezi's answer to the closed question "How can I send a POST request with a web browser?" for simple parameters. oezi says:
With a form, just set method to "post"
I.e., build yourself a very simple page to test the POST actions.
I will add, for the ones that don't know: what you specify as action is the resource you want to get (which can include GET-style query parameters), and value specifies the POST's data body. E.g. action="api/ids?name=John" and value="hello" will make a POST request to
Here's the Advanced REST Client extension for Chrome.
It works great for me -- do remember that you can still use the debugger with it. The Network pane is particularly useful; it'll give you rendered JSON objects and error pages.
For Firefox there is also an extension called RESTClient which is quite nice:
Some of the advantages of the fetch command are really precious: It's simple, short, fast, available and even as a console command it stored on your chrome console and can be used later.
The simplicity of pressing F12 , write the command in the console tab (or press the up key if you used it before) then press Enter , see it pending and returning the response is what making it really useful for simple POST requests tests.
Of course, the main disadvantage here is that, unlike Postman, this won't pass the cross-origin-policy, but still I find it very useful for testing in local environment or other environments where I can enable CORS manually.
Итак, если у вас уже установлен на компьютере локальный сервер (дистрибьютив Денвер) и вы научились писать простейшие программы на PHP, то самое время узнать, каким образом браузер (клиент) может делать серверу запросы и получать соответствующие ответы. На примере создания простой HTML-формы мы изучим основные принципы такого взаимодействия.
Если вы уже хорошо разбираетесь в каталогах Денвера, то можете создать любой PHP-файл в удобной для вас директории и приступить непосредственно к написанию кода. Для тех, кто еще не уверен в своих силах, советую поступить следующим образом: на виртуальном диске с Денвером (обычно это Z) в папке home создайте папку lessons . Далее, в этой папке создайте еще одну папку – www . Это ваша рабочая папка проекта, которая будет доступна из строки адреса браузера. Перезагрузите Денвер, чтобы созданный хост прописался в системе. Наконец, в папке www создайте файл index.php . Это и будет основной файл с вашим кодом.
Содержание файла index.php:
Как видите – это обычная HTML-разметка, однако мы назвали файл index.php , а это значит, что теперь в документ мы можем вставлять любые инструкции на языке PHP.
А это значит, что сервер все-таки получил ваши данные!
Давайте теперь разберемся.
Метод GET
Во-первых, что вообще такое HTML-форма? Это интерфейс, позволяющий отправлять какие-либо данные с браузера клиента на сервер. Взгляните на атрибуты вашей формы:
Атрибут action отвечает за адрес получателя отправляемых данных. В нашем случае форма отправляется на тот же адрес, т.е. на lessons/index.php.
Особое внимание заслуживает атрибут method , который определяет метод отправки запроса на сервер. Таких методов несколько, а наиболее распространенные (и практичные) это методы GET и POST. Сейчас нас будет интересовать метод GET.
GET-запрос означает, что данные будут передаваться на сервер непосредственно через адресную строку. Вы в этом уже убедились, отправив форму – к строке адреса добавились определенные данные. Откуда эти данные берутся? Обратите внимание на теги input в HTML-форме. У всех их присутствует атрибут name , который устанавливает имя данного поля.
При методе GET к основному адресу добавляется символ "?" (знак вопроса), чтобы сервер понимал, что поступили какие-то данные. После символа "?" идут непосредственно сами данные в виде имя=значение . Если таких данных несколько, то они разделяются между собой символом объединения "&". Отправьте форму с другими значениями полей и убедитесь в этом.
Ладно, данные отправились. Что дальше? Куда они ушли и что с ними делать? Вот тут и начинается самое интересное.
Пришло время научиться "ловить" и обрабатывать полученные данные. Ввиду того, что атрибут action указывает на текущий файл index.php, значит данные поступают именно сюда, поэтому в этом же файле мы и пропишем код обработки GET-запроса .
Итак, сразу же после тега добавим такой PHP-код:
Только что, после отправки формы, сервер получил и обработал полученные данные и прислал в браузер свой ответ!
Рассмотрим PHP-код нашего проекта, который представляет собой условие:
Сервер проверяет, а получена ли переменная GET-запроса с именем submit_form? То есть, говоря проще, а была ли вообще отправлена форма? Если это так, то серверный php-код отправляет прямо в браузер пользователя новую HTML-разметку со своим ответом, используя для этого оператор echo . Если вы внимательно изучите написанный код-обработчик, то вам сразу все станет понятным!
Интересный же этот метод GET! Измените адресную строку, например, на такую:
и нажмите кнопку "Ввод". Сервер снова вам ответит, приняв уже другие данные! Думаю, с этим все понятно.
Недостатки GET-метода в том, что, во-первых, есть ограничение на объем передаваемых данных, а во-вторых, этот метод является открытым и любую информацию можно перехватить. Поэтому личные данные пользователя (логин, имя, пароль и др.) никогда нельзя передавать через строку адреса.
Метод POST
Этот метод подразумевает передачу данных отдельным пакетным потоком в теле запроса, что надежно защищает отправляемые данные и позволяет передавать внушительные объемы информации, которые могут быть ограничены лишь настройками сервера. Поэтому такой тип запроса идеально подходит для отправки личных данных и любых типов файлов.
Измените ваш файл, заменив в PHP-коде имена переменных $_GET на $_POST, а в форме пропишите method="POST" . Обновите страницу и снова отправьте форму. Результат будет таким же, что и при методе GET, однако адресная строка осталась без изменений, а это значит, что данные были благополучно отправлены в защищенном виде в теле самого запроса.
Для закрепления материала создадим маленькое веб-приложение, которое будет запрашивать логин и пароль пользователя для входа на сайт. Код примера будет относительно сложным и от вас требуется внимание и желание разобраться в функционале PHP-программы.
Запустите пример и посмотрите, что происходит. Вначале запрашивается логин и пароль пользователя (в коде мы определили их как "admin" и "secret"), если все верно – мы попадаем на главную страницу сайта, если данные неверные – выводится соответствующее предупреждение.
Рассмотрим реализацию данной технологии.
Обратите внимание – весь код HTML-формы мы не выводим непосредственно, а запоминаем в переменной $form.
Будьте внимательны с кавычками! Весь HMTL-код находится внутри одинарных кавычек, поэтому его внутренние кавычки должны быть двойными . Если бы вы написали
то внутренний код будет содержать наоборот – одинарные кавычки.
Далее, в строке 27 проверяется, была ли отправлена форма (условие 1 на рис.), если нет – выводится HTML-форма, и сценарий прекращает свою работу – функция die() . Больше ничего, кроме формы в браузер не выводится.
Если же второе условие выполняется, то скрипт пропускает все операторы else и переходит на отображение основной страницы. ( переход 3 на рис.).
Это простейший пример. Естественно, в реальных проектах таких прямых проверок не производится – логин и пароль в зашифрованном виде хранятся в файлах или базе данных. Поэтому в статье описана сама технология взаимодействия клиента и сервера на основе GET и POST запросов. Для создания полноценных приложений вам необходимо иметь твердые знания по базам данных и объектно-ориентированному программированию. Об этом – в следующих статьях.
Читайте также: