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

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

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

Скопировать ссылку



Отправить 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/путь до файла/examople_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/путь/examople_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-запроса через JavaScript




Сумма равна:

Сообщение системы комментирования :

Форма пока доступна только админу... скоро все заработает...надеюсь...