Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

  1. Отправить POST-запрос через JavaScript
  2. Функция post в JavaScript вместе с формой
  3. Пример отправки POST-запроса через JavaScript
  4. Скачать можно здесь
  1. Отправить 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 в одно целое:

  2. Функция 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>

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

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


    Сумма равна:


Вас может еще заинтересовать список тем : #JS_POST |
Последняя дата редактирования : 23.02.2021 23:26
Название скрипта :Отправить POST-запрос через JavaScript
Скрипт № 71.1Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
js post запрос javascript post javascript posting javascript post запрос javascript post form javascript post request отправить post javascript отправка post javascript javascript send post xmlhttprequest javascript post javascript отправка post запроса javascript отправить post запрос метод post javascript javascript post запрос с redirect javascript http post как отправить post запрос javascript javascript send post request



Построение гравиков
Последние комментарии :
Марат :
08/02/2021 02:50
Всегда пожалуйста приходите ещё!
подробнее.
Павел :
08/02/2021 11:11
Спасибо большое. Очень поучительно.
подробнее.
Марат :
03/02/2021 07:22
03/02/2021Тестирование и разработка Comments+1.5 отложена на неопределенное…
подробнее.
Марат :
31/01/2021 08:31
Всегда пожалуйста!Рад, что помог!
подробнее.
Bambr :
31/01/2021 07:34
Огромное спасибо! )
подробнее.

'; ';