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

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

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

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

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

Для отправки берем свойства объекта user и формируем из их значений сроку с параметрами: "name=" + user.name + "&age="+user.age . Затем эта строка добавляется к строке запроса в методе open("GET", "http://localhost:8080/postdata.php?"+body)

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

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

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

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

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

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

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

POST-запросы

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

Для отправки данных методом POST надо установить заголовок Content-Type с помощью метода setRequestHeader() . В данном случае заголовок имеет значение application/x-www-form-urlencoded .

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

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

Для добавления данных у объекта FormData используется метод append(‘имя_параметра’, значение) . При этом никакие заголовки указывать не надо.

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

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

Ajax — это технология, которая используется с помощью JavaScript. С помощью Ajax можно отправить GET, POST, запросы без обновления страницы.

Для начала нам нужно понять, как работает Ajax. Ajax работает в JavaScript с помощью стандартной функции XMLHttpRequest, но в IE нужно использовать функцию ActiveXObject («Microsoft.XMLHTTP»).

Покажу на примерах, как всё это работает.

Читайте также:  Рейтинг телевизоров 28 дюймов 2018 цена качество

Начнём.

Нужно сделать проверку Ajax объекта, чтобы сделать скрипт кроссбраузерно.

Вот код проверки:

Потом нужно сделать несколько функций для упращения кода и его удобства. Вот код:

Потом нужно ещё написать обработчик, для того чтобы в запросе было отдельно наименование и значение. Например, так.

Где text — это наименование, а hello world — значение запроса.

Вот код обработчика:

Дальше нужно просто написать GET и POST обработчик. Вот код:

Сейчас нужно разобраться в коде:

Эта строка означает, что мы используем Ajax.
Дальше.

А это обработчик открывает запрос с сервером, где send отправляет данные.
Этот код для POST запроса, а для GET нужно немного изменить. Нужно просто не отправлять данные с помощью send. Для отправки GET запроса и его данных нужно просто в open после link прибавить вот этот "+"?"+q". Здесь мы отправляем данные в открытом виде. Например:

Вот с кодом всё. А теперь как использовать код.

Есть ещё возможность преобразовать результат в JSON.
Вот код:

Вот и всё. Спасибо.

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

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

AJAX – традиционный способ создания асинхронных HTTP-запросов. Данные можно отправлять при помощи метода HTTP POST. Получать информацию можно с использованием метода HTTP GET. Давайте взглянем на этот способ и попробуем сделать запрос GET. Я буду использовать JSONPlaceholder – бесплатный онлайн REST API для разработчиков. Он возвращает случайные данные в формате JSON.

Чтобы сделать HTTP вызов в AJAX, нужно инициализировать новый метод XMLHttpRequest() , описать конечную точку URL и метод HTTP (в данном случае – GET). Наконец, мы применим метод open() , чтобы связать метод HTTP и конечную точку URL. Далее мы вызовем метод send() , чтобы отправить запрос.

Читайте также:  Создал загрузочную флешку не запускается

Мы записываем HTTP ответ в консоль с использованием свойства XMLHTTPRequest.onreadystatechange . Оно содержит обработчик событий, который будет вызван при запуске события readystatechange .

Если вы просмотрите консоль своего браузера, она будет возвращать массив данных в формате JSON. Но как же нам узнать, когда запрос будет обработан? Другими словами, как же работать с ответами в случае с AJAX?

У свойства onreadystatechange есть 2 метода: readyState и status . Они позволяют нам проверять состояние запроса.

Если значение readyState равно 4, то это значит, что запрос закончен. У свойства readyState есть 5 ответов .

Помимо прямой отправки запроса в AJAX для JavaScript, существуют более мощные способы создавать HTTP-запрос (например, $.ajax ) – jQuery, допустим. Сейчас обсудим их.

Методы jQuery

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

$.ajax

Для JavaScript AJAX jQuery – один из самых простых способов обращения к HTTP.

Метод $.ajax имеет много параметров. Некоторые из них являются обязательными, а другие – нет. Этот метод содержит 2 опции обратного вызова: success и error. В них осуществляется работа, когда ответ получен.

$.get

Метод $.get используется для осуществления запросов GET. В нем 2 параметра: конечная точка и функция обратного вызова.

$.post

Метод $.post – еще один способ отправки данных на сервер. Он принимает 3 параметра: url, данные, которые вы хотите отправить, и функцию обратного вызова.

$.getJSON

Метод $.getJSON получает только данные в формате JSON. Он принимает 2 параметра: url и функцию обратного вызова.

В jQuery есть все эти методы, позволяющие отправлять запросы к удаленному серверу и получать от него ответ. Однако, по сути, все эти методы можно уложить в один: для JavaScript – $.ajax (jQuery), как показано ниже:

Fetch

fetch – новый мощный веб-API, который позволяет отправлять асинхронные запросы. Вообще, fetch – это один из лучших (и мой любимый) способов создания HTTP-запросов. Он возвращает Promise («обещание») – замечательную функцию в ES6. Promises позволяют работать с асинхронными запросами по-умному. Взглянем на то, как fetch работает:

Функция fetch принимает всего 1 обязательный параметр: конечную точку URL. В ней также есть и дополнительные параметры, которые продемонстрированы в примере ниже:

Читайте также:  Как узнать свой клок генератор

Как вы можете заметить, fetch обладает большим количеством преимуществ с точки зрения отправки HTTP-запросов. Кроме того, в fetch есть другие модули и плагины, которые позволяют получать и отправлять запросы к серверной стороне и от нее: например, axios .

Axios

Axios – это открытая библиотека для создания HTTP-запросов. В ней есть много отличных возможностей. Давайте рассмотрим, как она работает.

Для начала вам нужно будет включить Axios. Есть 2 способа включения Axios в свой проект.

Во-первых, можно использовать npm:

Затем вам нужно импортировать библиотеку:

Во-вторых, можно включить Axios при помощи CDN:

Создание запросов с Axios

С Axios можно использовать GET и POST как для того, чтобы получать данные с сервера, так и для того, чтобы отправлять их на него.

GET:

Axios включает в себя 1 обязательный параметр. Он также может принимать второй дополнительный параметр. Он использует данные в качестве простого запроса.

POST:

Axios возвращает Promise («обещание»). Если вы знакомы с обещаниями, то наверняка знаете, что одно обещание может работать с несколькими запросами. То же самое можно проделать с Axios – он тоже может «заниматься» несколькими запросами одновременно.

Axios поддерживает много других методов и опций.

Angular HTTPClient

У Angular есть собственный HTTP модуль, который работает с приложениями на Angular. Он использует библиотеку RxJS для работы с асинхронными запросами. В нем есть много вариантов для осуществления HTTP-запросов.

Отправляем вызов к серверу при помощи Angular HTTPClient

Чтобы сделать запрос с использованием Angular HTTPClient, нам нужно будет запустить свой код в приложении Angular. Из-за этого я и создал такое приложение.

Для начала нужно импортировать HTTPClientModule в app.module.ts .

Затем нам надо создать сервис, который будет обрабатывать запросы. Такой сервис можно легко сгенерировать при помощи Angular CLI .

Далее нужно импортировать HTTPClient в сервис fetchdataService.ts и ввести его в конструктор.

Кроме того, необходимо импортировать fetchdataService в app.component.ts .

Наконец, вызываем сервис и запускаем его.

Демонстрационный пример можно просмотреть на Stackblitz .

Заключение

Мы только что рассмотрели наиболее распространенные способы создания HTTP-запросов используя JavaScript.

Ссылка на основную публикацию
Как обрезать видео на андроиде без программ
Автор: Юрий Белоусов · Опубликовано 06.01.2017 · Обновлено 13.04.2017 Андроид приложение для обрезки видео на телефоне Заниматься обработкой видео и...
Как наклеить бронестекло на телефон видео
На сегодняшний день нет ни одного человека, который не знает, что такое телефон и для чего он служит. Более того,...
Как наклеить стекло на смартфон самсунг
Покупка новой техники — это всегда очень волнующий и радостный момент. Когда мы берем в руки свой новенький смартфон, то...
Как обрезать защитное стекло для смартфона
«MyTooling.ru» – информационный портал, предоставляющий полную информацию о всех инструментах от А до Я, с которым действительно приятно работать! Наверное,...
Adblock detector