Отправка POST запросов через AJAX в JavaScript
Давайте теперь отправим на сервер POST запрос. Для этого у функции fetch есть второй параметр с настройками. В настройке method указывается метод HTTP запроса. Укажем метод POST:
button.addEventListener(‘click’, function() < let promise = fetch('/handler/', < method: 'post', >); >);
Давайте также зададим данные, которые мы хотим отправить на сервер. В POST запросах данные передаются в теле HTTP запроса. Для этого данные нужно указать в настройке body . Укажем их в виде Query String, задав их тип соответствующим MIME:
button.addEventListener(‘click’, function() < let promise = fetch('/handler/', < method: 'post', body: 'num1=1&num2=2', headers: < 'Content-Type': 'application/x-www-form-urlencoded', >, >); >);
Получим эти данные на сервере, сделаем с ними что-нибудь и отправим их обратно:
export default < '/handler/': function(< post >) < return Number(post.num1) + Number(post.num2); >>
На клиенте дан див и кнопка. По нажатию на кнопку отправьте на сервер три числа методом POST. Пусть сервер найдет сумму переданных чисел. Результат запишите в див.
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 для получения такой кодировки «вручную»:
alert( encodeURIComponent(' ') ); // %20 alert( encodeURIComponent('/') ); // %2F alert( encodeURIComponent('В') ); // %D0%92 alert( encodeURIComponent('Виктор') ); // %D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше.
GET-запрос
Формируя XMLHttpRequest, мы должны формировать запрос «руками», кодируя поля функцией encodeURIComponent .
Например, для посылки GET-запроса с параметрами name и surname , аналогично форме выше, их необходимо закодировать так:
// Передаём name и surname в параметрах запроса var xhr = new XMLHttpRequest(); var params = 'name=' + encodeURIComponent(name) + '&surname=' + encodeURIComponent(surname); xhr.open("GET", '/submit?' + params, true); xhr.onreadystatechange = . ; xhr.send();Прочие заголовки
Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как Content-Length и Connection .
По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например Referer . Это сделано в целях контроля правильности запроса и для безопасности.
Сообщаем про AJAX
Запрос, отправленный кодом выше через XMLHttpRequest , никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить.
Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок, например такой:
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");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 :
var xhr = new XMLHttpRequest(); var body = 'name=' + encodeURIComponent(name) + '&surname=' + encodeURIComponent(surname); xhr.open("POST", '/submit', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = . ; xhr.send(body);Только UTF-8
Всегда используется только кодировка UTF-8, независимо от языка и кодировки страницы.
Если сервер вдруг ожидает данные в другой кодировке, к примеру windows-1251, то их нужно будет перекодировать.
Кодировка multipart/form-data
Кодировка urlencoded за счёт замены символов на %код может сильно «раздуть» общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: multipart/form-data.
В этой кодировке поля пересылаются одно за другим, через строку-разделитель.
Чтобы использовать этот способ, нужно указать его в атрибуте enctype и метод должен быть POST:
Форма при такой кодировке будет выглядеть примерно так:
. Заголовки. Content-Type: multipart/form-data; boundary=RaNdOmDeLiMiTeR --RaNdOmDeLiMiTeR Content-Disposition: form-data; name="name" Виктор --RaNdOmDeLiMiTeR Content-Disposition: form-data; name="surname" Цой --RaNdOmDeLiMiTeR--…То есть, поля передаются одно за другим, значения не кодируются, а чтобы было чётко понятно, какое значение где – поля разделены случайно сгенерированной строкой, которую называют «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 :
var data = < name: 'Виктор', surname: 'Цой' >; var boundary = String(Math.random()).slice(2); var boundaryMiddle = '--' + boundary + '\r\n'; var boundaryLast = '--' + boundary + '--\r\n' var body = ['\r\n']; for (var key in data) < // добавление поля body.push('Content-Disposition: form-data; name="' + key + '"\r\n\r\n' + data[key] + '\r\n'); >body = body.join(boundaryMiddle) + boundaryLast; // Тело запроса готово, отправляем var xhr = new XMLHttpRequest(); xhr.open('POST', '/submit', true); xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); xhr.onreadystatechange = function() < if (this.readyState != 4) return; alert( this.responseText ); >xhr.send(body);Тело запроса будет иметь вид, описанный выше, то есть поля через разделитель.
Отправка файла
Можно создать запрос, который сервер воспримет как загрузку файла.
Для добавления файла нужно использовать тот же код, что выше, модифицировав заголовки перед полем, которое является файлом, так:
Content-Disposition: form-data; name="myfile"; filename="pic.jpg" Content-Type: image/jpeg (пустая строка) содержимое файлаFormData
Современные браузеры, исключая IE9- (впрочем, есть полифил), поддерживают встроенный объект FormData, который кодирует формы для отправки на сервер.
Это очень удобно. Например:
Этот код отправит на сервер форму с полями name , surname и patronym .
- Конструктор new FormData([form]) вызывается либо без аргументов, либо с DOM-элементом формы.
- Метод formData.append(name, value) добавляет данные к форме.
Объект formData можно сразу отсылать, интеграция FormData с XMLHttpRequest встроена в браузер. Кодировка при этом будет multipart/form-data .
Другие кодировки
XMLHttpRequest сам по себе не ограничивает кодировку и формат пересылаемых данных.
Поэтому для обмена данными часто используется формат JSON:
var xhr = new XMLHttpRequest(); var json = JSON.stringify(< name: "Виктор", surname: "Цой" >); xhr.open("POST", '/submit', true) xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); xhr.onreadystatechange = . ; // Отсылаем объект в формате JSON и с Content-Type application/json // Сервер должен уметь такой Content-Type принимать и раскодировать xhr.send(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. К ним применимы все те же принципы, что описаны выше.
Js как отправить post запрос
Чтобы отправить данные на сервер из кода JavaScript в ajax-запросе, в метод send() объекта XMLHttpRequest передаются отправляемые данные.
Для тестирования отправки, как и в прошлых статьях, в качестве сервера будем использовать Node.js, как самой простой вариант. Итак, создадим файл app.js и определим в нем следующий код сервера, который принимает данные:
const http = require("http"); const fs = require("fs"); http.createServer(async (request, response) => < if(request.url == "/user")< let userName= ""; // получаем данные в строку // получаем данные из запроса и добавляем их в строку for await (const chunk of request) < userName += chunk; >userName = userName + " Smith"; response.end(userName); > else < fs.readFile("index.html", (_, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));
В данном случае при обращении по адресу «/user» сервер получает все отправленные данные:
if(request.url == "/user")Мы можем перебрать объект запроса и таким образом извлечеть из него полученные данные:
let userName= ""; // получаем данные в строку // получаем данные из запроса и добавляем их в строку for await (const chunk of request)В данном случае отправленные данные в виде объектов chunk добавляются в строку userName . В данном случае мы предполагаем, что на сервер отправляется простая строка с текстом, соответственно каждый кучек данных chunk будет представлять строку.
Также здесь предположим, что клиент отправляет на сервер некоторое имя пользователя. И для примера к этому имени добавляется фамилия и измененное имя отправляется обратно клиенту:
userName = userName + " Smith"; response.end(userName);Теперь определим на странице index.html код для отправки данных на этот сервер:
METANIT.COM Для отправки применяется метод POST. А в качестве отправляемых данных выступает простая строка "Tom". То есть на сервер отправляется простой текст. И поскольку сервер в ответ также отправляет текст, то для получения ответа здесь применяется свойство xhr.responseText . И при запуске данной веб-страницы будет выполняться отправка данных на сервер, и в консоли браузера можно будет увидеть полученный от сервера ответ:
Отправка json
Подобным образом можно отправлять более сложные по структуре данные. Например, рассмотрим отправку json. Для этого на строне node.js определим следующий сервер:
const http = require("http"); const fs = require("fs"); http.createServer(async (request, response) => < if(request.url == "/user")< // получаем строковое представление ответа let data=""; for await (const chunk of request) < data += chunk; >// мы ожидаем данные типа const user = JSON.parse(data); // парсим строку в json // для теста изменяем данные полученного объекта user.name = user.name + " Smith"; user.age += 1; // отправляем измененый объект обратно клиенту response.end(JSON.stringify(user)); > else < fs.readFile("index.html", (_, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));В данном случае на сервера ожидаем, что мы получим объект в формате json, который имеет два свойства - name и age. Для примера сервер меняет значения этих свойств и отправляет измененный объект обратно клиенту.
На веб-странице установим объект json для отправки и получим обратно данные:
METANIT.COM Здесь на сервер отправляется объект tom, который имеет два свойства: name и age. Перед отправкой он кодируется в формат json с помощью функции JSON.stringify() .
const data = JSON.stringify(tom);При отправке с помощью метода setRequestHeader() для заголовка "Content-Type" устанавливаем значение "application/json", тем самым указывая, что мы отправляем данные в формате json:
xhr.setRequestHeader("Content-Type", "application/json");В обработчике события load сначала парсим текст ответа из формата json в стандартный объект JavaScript:
const user = JSON.parse(xhr.responseText)Затем выводим данные полученного объекта на консоль браузера:
Js как отправить post запрос
Главная СтатьиСпособы отправки HTTP-запросов в JavaScript
Поделиться в соцсетях:В JavaScript есть отличные модули и методы для выполнения HTTP-запросов, которые можно использовать для отправки или получения данных с сервера. В этой статье рассмотрены популярные способы отправки HTTP-запросов в JavaScript.
XMLHttpRequest
XMLHttpRequest - это собственный API в Javascript, который инкапсулирует логику отправки HTTP-запросов без необходимости обновления загруженной веб-страницы (Ajax другими словами). Данные можно отправлять с помощью метода POST и получать с помощью метода GET.
Для начала рассмотрим метод GET, а данные возьмем из https://jsonplaceholder.typicode.com/users - бесплатного API для разработчиков.
Чтобы сделать HTTP-вызов в Ajax, нужно инициализировать новый метод XMLHttpRequest() , указать конечную точку URL (эндпоинт) и метод HTTP (в нашем случае GET). Далее используем метод open() , чтобы связать метод HTTP и эндпоинт, и метод send() для отправки запроса.
Выведем HTTP-ответ в консоль с помощью свойства XMLHttpRequest.onreadystatechange , которое содержит обработчик событий, вызываемый при запуске события readystatechanged .
const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => < console.log(Http.responseText); // =>получим массив данных в формате JSON >Индикатором успешного запроса будет статус со значением 200. Значение статуса любого запроса мы можем увидеть во вкладке Network инструментов разработчика браузера. Однако также можно добавить проверку на статус, чтобы точно понимать, что запрос выполнился.
Свойство onreadystatechange имеет два метода, readyState и status , которые позволяют нам проверить состояние нашего запроса.
const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => < if (this.readyState == 4 && this.status == 200) < console.log(Http.responseText); >>Если readyState равно 4, это означает, что запрос выполнен. Подробней про значения здесь.
Рассмотрим теперь запрос POST, служащий для добавления изменений в данные на сервере. Для этого необходимо дополнительно указать данные, которые необходимо отправить и добавить новый метод setRequestHeader :
const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("POST", url); Http.setRequestHeader("Content-Type", "application/json"); Http.send(JSON.stringify(user));Ниже добавим другие обработчики событий для отслеживания хода выполнения запроса:
// ход загрузки данных Http.upload.onprogress = function(e) < console.log(e.loaded); // загруженные данные console.log(e.total); // всего данных >// окончание загрузки данных Http.upload.onload = function(e) < console.log("Данные загружены"); >// полная отправка запроса Http.onload = function() < console.log(Http.status); >// ошибка при отправке запроса Http.onerror = function()Методы jQuery
jQuery содержит множество методов для простой обработки HTTP-запросов. Чтобы их использовать, для начала необходимо подключить библиотеку jQuery в своем проекте.
$.get
Этот метод используется для выполнения GET-запросов. Он принимает два параметра: эндпоинт и функцию обратного вызова.
const url='https://jsonplaceholder.typicode.com/users'; $.get(url, function (data, status) < console.log(data); >);$.post
Метод для POST-запросов, принимает три параметра: эндпоинт, данные для отправки и функцию обратного вызова.
const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; $.post(url, user, function (data, status) < console.log(data); >);$.getJSON
Метод извлекает только данные в формате JSON. Принимает два параметра: эндпоинт и функцию обратного вызова.
const url='https://jsonplaceholder.typicode.com/users'; $.getJSON(url, function (data, status) < console.log(data); >);$.ajax
jQuery Ajax - один из самых простых способов выполнения HTTP-запроса.
const url='https://jsonplaceholder.typicode.com/users'; $.ajax(< url: url, type: "GET", success: function (result) < console.log(result); >, error: function (error) < console.log(error); >>);С помощью метода $.ajax можно выполнять и остальные запросы, главное - не забывать их указывать в поле type и добавлять дополнительные поля ( data , dataType ).
Fetch
Fetch - это новый мощный веб-API, который позволяет выполнять асинхронные запросы. Он возвращает промис, который появился в стандарте ES6, что позволяет более разумно обрабатывать асинхронный запрос. Пример простой работы Fetch:
const url='https://jsonplaceholder.typicode.com/users'; fetch(url) .then(data => data.json()) .then(response => console.log(response));Fetch принимает обязательный параметр - эндпоинт. Однако туда также можно передать и другие параметры:
const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; const otherParam = < headers: < "content-type": "application/json; charset=UTF-8", >, body: JSON.stringify(user), method: "POST", >; fetch(url, otherParam) .then(data => data.json()) .then(response => console.log(response)) .catch(error => console.log(error));Как видим, Fetch значительно снижает сложность и многословность кода за счет использования более простого синтаксиса и промисов.
Axios
Axios - это библиотека с открытым исходным кодом для выполнения HTTP-запросов, которая предоставляет множество замечательных функций.
Чтобы интегрировать библиотеку Axios к себе в проект, мы можем либо установить ее через менеджер пакетов (npm, yarn) и потом сделать импорт, либо, как и в случае с jQuery, просто подключить в коде HTML:
При выполнении GET-запросов с помощью Axios мы можем использовать специальный метод axios.get() .
const url='https://jsonplaceholder.typicode.com/users'; axios.get(url) .then(response => console.log(response.data)) .catch(error => console.log(error))Для POST-запроса используем другой метод:
const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; axios.post(url, user) .then(response => console.log(response.data)) .catch(error => console.log(error));Axios сокращает объем работы, которую мы должны выполнять с нашей стороны, чтобы выполнять HTTP-запросы, даже по сравнению с Fetch. Как и Fetch, Axios перехватывает ошибки HTTP в своем методе catch, устраняя необходимость специальной проверки перед обработкой ответа.
Поскольку Axios возвращает промис, можно выполнять одновременно несколько запросов:
function getUser() < const url='https://jsonplaceholder.typicode.com/users'; return axios.get(url); >function getPost() < const url='https://jsonplaceholder.typicode.com/posts'; return axios.get(url); >axios.all([getUser(), getPost()]) .then(([users, posts]) => < console.log(users.data); console.log(posts.data); >) .catch(error => console.log(error))SuperAgent
SuperAgent - один из первых сторонних пакетов, представленных в JavaScript для выполнения HTTP-запросов. Подобно Axios, он использует XMLHttpRequest API в своей реализации и поставляется с полным набором функций, полезных в ряде задач обработки запросов.
Подключается пакет либо через менеджер, либо в HTML:
При отправке HTTP-запросов с помощью SuperAgent мы можем полагаться на его специальные методы для инициирования запроса определенного типа. Например, мы можем использовать метод superagent.get() для отправки GET-запросов:
const url='https://jsonplaceholder.typicode.com/users'; superagent.get(url) .then(response => console.log(response.body)) .catch(error => console.log(error))const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; superagent.post(url) .send(user) .then(response => console.log(response.body)) .catch(error => console.log(error))Ky
Ky - это относительно новый пакет Javascript, который можно использовать для выполнения асинхронных HTTP-запросов. Он построен на основе Fetch API, но с более простым синтаксисом и дополнительными функциями.
Пример использования для GET-запроса:
const url='https://jsonplaceholder.typicode.com/users'; async function getData () < try < const data = await ky.get(url).json(); console.log(data); >catch (error) < console.log(error) >>Пример использования для POST-запроса:
const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; async function postData () < try < const response = await ky.post(url, ); console.log(response); > catch (error) < console.log(error) >>
