Как отправить post запрос javascript

Отправка POST и GET запросов через JavaScript

Отправка POST и GET запросов через JavaScript

Существует несколько способов отправки запросов на сервер через JavaScript. Но обычно нужно не только отправить данные, но и обработать ответ сервера. Указать тип данных, который он вернет. А еще нужно запустить функцию после успешного выполнения. И не забыть про обработку ошибок, если запрос не прошел. В общем много чего еще можно перечислять. Но я это к тому, что для разных задач нужен свой подход и способ реализации. Вот именно о существующих способах и их настройке мы поговорим в этой статье.

В JavaScript есть объект XMLHttpRequest, который позволяет отправлять асинхронные HTTP-запросы серверу. Еще есть всем известная библиотека JQuery, которая тоже имеет функции для отправки запросов на сервер.

На мой взгляд работать с библиотекой удобней всего. Поскольку редко когда на сайте используют чистый JavaScript. А раз библиотека уже подключена, то проще воспользоваться уже готовой функцией, чем использовать громоздкие конструкции как альтернативу. Поэтому для отправки запросов на сервер будем использовать функции этой библиотеки.

Запрос методом GET

Самый простой способ передать запрос на сервер:

Параметр dataType задает тип данных, которые ожидаются от сервера. Может принимать значения: xml, json, script, text или html. Если не указан, то определяется автоматически.

Запрос методом POST

Запрос методом PUT

Следует помнить, что метод поддерживается не всеми браузерами.

Запрос методом DELETE

И тоже, как и метод PUT, не всеми браузерами поддерживается.

Вот такими способами можно отправлять запросы на сервер с помощью библиотеки jQuery. Они идеально подходят для задач, где нужно отправить или получить данные от сервера не перезагружая страницы.

Источник

Отправка POST-запросов через JavaScript

Начнём с простого: написание PHP-кода:

Я написал также в комментариях про «асинхронную работу«. Есть ещё синхронный вариант. Отличие только в том, что в синхронном пока не будет получен ответ от сервера, браузер работать не будет, он просто повиснет. Мне трудно придумать такую задачу, где это необходимо, поэтому я сразу написал асинхронный вариант. Он работает следующим образом: мы отправляем запрос и ждём ответа, но при этом браузер не виснет. А когда ответ приходит (xmlhttp.readyState == 4), то мы сразу обрабатываем ответ. Вот это и есть асинхронный вариант работы, он чуть-чуть сложнее, но только его и нужно использовать (за исключением очень редких случаев).

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 57 ):

Извиняюсь за невежество, но что значат эти try<>catch<>

Ахренеть. и в каких случаях это может понадобиться?

Для создания динамики на страницах, без «левых» библиотек.

Спасибо, то что нужно 🙂

Это вывод результата и ничего больше.

responseText содержит все что бало echo?

Да, в нём результат работы echo и будет.

т.е на сервере должно выводиться толко то что является ответом яваскрипту?

Разумеется, надо выводить только то, что нам нужно.

Михаил, скажите пожалуйста как можно после всего незаметно для пользователя обновить страницу? я просто пытаюсь сделать авторизацию без перезагрузки, но без неё не получается, всё работает но аватарка и всё остальное появляется только при обновлении страницы

Тут уже нужно использовать DOM, либо JQuery. Добавлять одни элементы, удалять другие элементы.

Ясно, значит я опять прогорел с юзабилити

Вот отправляю данные к php, через if (!defined(«. «)) die («Hacking attempt!»); Не проходит, приходиться закрывать. Скажите как можно выполнить операцию без закрытия? И безопасен ли ваш ментод?

Я делаю проверку на содержание постов. Такой вопрос, может не по теме но охота узнать. Нужно закрыть доступ к каталогу, в котором находится php скрипт.Создаю htacess, с содержимым: [code]Order Deny,Allow Deny from all[/code] После я не могу обратиться к скрипту через post запрос.Какие выходы? Можно ли закрыть доступ к каталогу и сохранить весь процесс работы?

Противоречие. Хотите, чтобы доступа к нему не было, но при этом пользователь туда отправляет данные. Если нужно скрыть какие-то библиотеки, то делайте это, а все скрипты-обработчики должны быть доступны.

Нужно убрать из виду php скрипты, если вдруг пользователь догадается в каком каталоге они находятся.Скажите пожалуйста, что нужно прописать в htacess.Спасибо.

Прописал, положил. Не хочет присылать ответ php скрипт к js. На скок я понимаю.Нет выхода, или я что та не так сделал?

Источник

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

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

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

Во время обычной отправки формы

* ‘ ( ) заменяются на их цифровой код в UTF-8 со знаком %.

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

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

GET-запрос

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

POST с urlencoded

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

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

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

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

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

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

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

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

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

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

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

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

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

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

POST с multipart/form-data

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

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

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

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

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

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

FormData

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

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

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

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

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

Итого

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

Источник

Как отправить post запрос javascript

Принцип отправки данных может отличаться в различных ситуациях. Рассмотрим эти ситуации.

Отправка GET-запроса

GET-запрос характеризуется тем, что данные могут отправляться в строке запроса:

Предполагается, что данные отправляются скрипту на языке php postdata.php, который может иметь, например, следующее содержание:

Конкретная технология стороны сервера тут не важна. И в качестве тестирования можно взять любую другую технологию. Например, ASP.NET MVC. Метод контроллера в ASP.NET MVC, который принимает данные, мог бы выглядеть следующим образом:

Кодирование параметров

Все отправляемые в GET-запросе параметры разделяются знаком амперсанда(&). Но что, если какой-нибудь параметр имеет знак амперсанда. Например,

В этом случае при получении параметров скрипт на стороне сервера может неправильно обработать данные и неправильно извлечь параметры. Поэтому, чтобы кодировать все передаваемые данные, нужно применять функцию encodeURIComponent() :

При этом строка «Tom&Tim» будет кодирована в следующую строку: «Tom%26Tim».

При необходимости мы можем выполнить обратное декодирование с помощью функции decodeURIComponent() :

POST-запросы

Отправка данных в POST-запросах будет немного отличаться:

Отправка форм. FormData

Также мы можем определить форму в html и использовать ее для отправки:

Для сериализации всех полей формы нам достаточно передать объект формы в конструктор FormData: var formData = new FormData(form);

Источник

XMLHttpRequest

XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на наличие слова «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML. Мы можем загружать/скачивать файлы, отслеживать прогресс и многое другое.

В современной веб-разработке XMLHttpRequest используется по трём причинам:

Основы

XMLHttpRequest имеет два режима работы: синхронный и асинхронный.

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

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

Этот метод устанавливает соединение и отсылает запрос к серверу. Необязательный параметр body содержит тело запроса.

Три наиболее используемых события:

Вот полный пример. Код ниже загружает /article/xmlhttprequest/example/load с сервера и сообщает о прогрессе:

После ответа сервера мы можем получить результат запроса в следующих свойствах xhr :

Мы можем также указать таймаут – промежуток времени, который мы готовы ждать ответ:

Тип ответа

К примеру, давайте получим ответ в формате JSON:

Состояния запроса

Список всех состояний, указанных в спецификации:

Изменения в состоянии объекта запроса генерируют событие readystatechange :

Вы можете наткнуться на обработчики события readystatechange в очень старом коде, так уж сложилось исторически, когда-то не было событий load и других. Сегодня из-за существования событий load/error/progress можно сказать, что событие readystatechange «морально устарело».

Отмена запроса

Если мы передумали делать запрос, можно отменить его вызовом xhr.abort() :

Синхронные запросы

Выглядит, может быть, и неплохо, но синхронные запросы используются редко, так как они блокируют выполнение JavaScript до тех пор, пока загрузка не завершена. В некоторых браузерах нельзя прокручивать страницу, пока идёт синхронный запрос. Ну а если же синхронный запрос по какой-то причине выполняется слишком долго, браузер предложит закрыть «зависшую» страницу.

Из-за всего этого синхронные запросы используют очень редко. Мы более не будем рассматривать их.

HTTP-заголовки

XMLHttpRequest умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.

Для работы с HTTP-заголовками есть 3 метода:

XMLHttpRequest не разрешено изменять их ради безопасности пользователей и для обеспечения корректности HTTP-запроса.

Ещё одной особенностью XMLHttpRequest является то, что отменить setRequestHeader невозможно.

Если заголовок определён, то его нельзя снять. Повторные вызовы лишь добавляют информацию к заголовку, а не перезаписывают его.

Возвращает значение заголовка ответа name (кроме Set-Cookie и Set-Cookie2 ).

Заголовки возвращаются в виде единой строки, например:

Таким образом, если хочется получить объект с парами заголовок-значение, нам нужно задействовать немного JS.

Вот так (предполагается, что если два заголовка имеют одинаковое имя, то последний перезаписывает предыдущий):

POST, FormData

Чтобы сделать POST-запрос, мы можем использовать встроенный объект FormData.

Если нам больше нравится формат JSON, то используем JSON.stringify и отправляем данные как строку.

Прогресс отправки

Событие progress срабатывает только на стадии загрузки ответа с сервера.

Если мы отправляем что-то большое, то нас гораздо больше интересует прогресс отправки данных на сервер. Но xhr.onprogress тут не поможет.

Примеры обработчиков для этих событий:

Пример из реальной жизни: загрузка файла на сервер с индикацией прогресса:

Запросы на другой источник

XMLHttpRequest может осуществлять запросы на другие сайты, используя ту же политику CORS, что и fetch.

Детали по заголовкам, которые при этом необходимы, смотрите в главе fetch.

Итого

Типичный код GET-запроса с использованием XMLHttpRequest :

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

Наиболее часто используют события завершения загрузки ( load ), ошибки загрузки ( error ), или мы можем использовать единый обработчик loadend для всего и смотреть в свойствах объекта запроса xhr детали произошедшего.

Источник