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

javascript post, или как "Отправить POST-запрос через JavaScript". С примерами.

Подробно о "javascript post"

1. Отправить POST-запрос через JavaScript
2. Функция post в JavaScript вместе с формой
3. Пример отправки POST-запроса через JavaScript
4. Ответ post js
5. Скачать

См ещё : загрузка файла js.

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

Мы рассматривали ранее post в php - теперь пришло время разобраться в теме "post в JavaScript", не будем тянуть кота з хвост и приступим!

Это самый простой пример, как работает "post в JavaScript"

Что мы будем делать!? Начнем с алгоритма!

Алгоритм отправки "post в JavaScript"

Создадим файл php, где будет короткий код:

<?
$a = $_POST["a"] ;
$b = $_POST["b"] ;
echo $a + $b;


Здесь на странице создадим форму с полями ввода.

И здесь же напишем функцию, которая получит данные из формы, отправит их с помощью "post JavaScript".

Она же получит ответ из файла и выведем результат действия в php файле.

Функция "post в JavaScript"

Создадим функцию post :

function post() {}

Получаем данные из полей ввода :

var a = ida .value; // Считываем значение a

var b = idb .value; // Считываем значение b

В переменную "data" помещаем, конструкцию похожую на массив(но не массив) ключ = значение.

var data = "a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b);

Создаём объект xhr:

var xhr = new XMLHttpRequest();

Открываем асинхронное соединение :

xhr.open("POST", "https://dwweb.ru/путь до файла/example_post_js.php" , true);

Отправляем кодировку :

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Отправляем POST-запрос :

xhr.send(data);

Далее, не буду каждую строчку расписывать смотрим комментарии:

xhr.onreadystatechange = function() // Ждём ответа от сервера
{
  if (xhr.readyState == 4) // возвращает текущее состояние объекта(0-4)
  {
    if(xhr.status == 200) // код 200 (если страница не найдена вернет 404)
    {
      summa.innerHTML = xhr.responseText; // Выводим ответ сервера
    }
  }
}


Соберем функцию post в JavaScript в одно целое:




Функция post в JavaScript вместе с формой:

<script>

function post()

{

  var a = ida .value; // Считываем значение a

  var b = idb .value; // Считываем значение b

  var data = "a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b);

  var xhr = new XMLHttpRequest();// Создаём объект xhr

  xhr.open("POST", "https://dwweb.ru/путь/example_post_js.php" , true);// Открываем асинхронное соединение

  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// Отправляем кодировку

  xhr.send(data); // Отправляем POST-запрос

  xhr.onreadystatechange = function() // Ждём ответа от сервера

  {

    if (xhr.readyState == 4) // возвращает текущее состояние объекта(0-4)

    {

      if(xhr.status == 200) // код 200 (если страница не найдена вернет 404)

      {

        summa.innerHTML = xhr.responseText; // Выводим ответ сервера

      }

    }

  }

}

</script>

Простая форма для отправки "post в JavaScript"

<input type="text" name="a" id="ida"><br>

<input type="text" name="b" id="idb"><br>

<input type="button" value="Сумма" onclick="post()">

<p>Сумма равна: <span id="summa"></span></p>

Смотри далее Живой пример отправки POST-запроса через JavaScript




Ответ post js

Один из поисковых запросов - "Ответ post js - что это вообще такое...?

Дело в том, что в отличии от php post - вернуть и получить простым способом от отправленного "post массива" в javascript не существует.

Но хотя, кто с этим сталкивался - это не кажется уж таким и сложным!

Получаем ответ post запроса javascript

Если вы помните тот код, который я рассматривал выше...

после строки "xhr.send(data);"

Используем "onreadystatechange", для того, чтобы промониторить состояние "readyState"

xhr.onreadystatechange = function() // Ждём ответа от сервера

Далее условие на то, что внутри xhr.readyState. Состояние 4 означает, что запрос был отправлен, сервер завершил возврат ответа, а браузер завершил загрузку содержимого ответа - подробнее

if (xhr.readyState == 4) // возвращает текущее состояние объекта(0-4)

Теперь "status", если он равен 200, то все хорошо...

if (xhr.status == 200) {

Выводим результат или что там вам нужно... Например...

alert (xhr.responseText);

Если требуется вывести ошибку, то можно сделать else:

alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found

Итого - давайте соберем весь код ответа post js

xhr.onreadystatechange = function() // Ждём ответа от сервера
{
  if (xhr.readyState == 4) // возвращает текущее состояние объекта(0-4)
  {
    if(xhr.status == 200) // всё хорошо
    {
      alert (xhr.responseText); // Выводим ответ сервера
    }
    else
    {
      alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found
    }
  }
}




Пример отправки POST-запроса через JavaScript

Теперь - нам осталось вставить данный код прямо сюда и теперь вы можете проверить, как работает отправка POST-запроса через JavaScript




Сумма равна: