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

Отправить 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


    Сумма равна:


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

Подписаться + =
Теги:
post на чистом jsjs post запросjavascript postjavascript postingjavascript post запросjavascript post formjavascript post requestотправить post javascriptотправка post javascriptjavascript send postxmlhttprequest javascript postjavascript отправка post запросаjavascript отправить post запросметод post javascriptjavascript post запрос с redirectjavascript http postкак отправить post запрос javascriptjavascript send post request

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.