Отправим js post

16.03.2026 15:22 / Марат / Смотрели : 31 / js | js_post | "js post". Как отправить post в javascript. Разберем на пальцах, пошагово отправку данных на сервер. Получим ответ от сервера. Выведем полученный результат на экран! Если у вас не получилось собрать весь код "js post", то вы можете скачать готовый код в архиве.

Отправим js post на сервер.

1. Отступление.
Что будем делать?.
2. Форма для js post.
3. Javascript код для js post.
4. Php код для js post.
5. Скачать код для js post.

1. Отступление

Прежде чем начать моё повествование, хочу сказать о теме "js post " вообще и в частности!

О теме js post вообще и в частности!

Вы должны понимать, что любая тема касающаяся программирования и любого языка(здесь будет использоваться js и php) вариативна!

Что такое вариативна?

Вариативна - это когда можно выполнить некое действие несколькими способами! И даже в самих функциях, методах возможны варианты! Например данные в "js post" можно отправлять: 1). строкой 2). объектом 3).файлом 4). смешанный из выше перечисленных 3.

Зачем нужно отступление?

Я не пытаюсь объять необъятное!

Потому, что если, перечислять все варианты, то на это уйдет не просто много времени, а очень много времени!

Вы, начав изучать такой "талмуд", скорее всего просто не дочитаете его до конца, поскольку логику начинающего я ещё помню : "мне нужен максимально простой и понятный текст и код, чтобы он работал!".

Поэтому... возьмем самый простой код и пример, чтобы он работал!

Что будем делать?

Отправим из 2 полей ввода два числа на сервер с помощью "js post".

На сервере сложим эти два числа и выведем с помощью "echo".

Получим ответ от сервера и выведем его на страницу.

2. Форма для js post.

Если вы поленились читать вступление, то:

Создадим простой пример отправки "js post" - максимально просто, насколько это возможно!

Если вам потребуется больше теории, то вы всегда сможете её наёти в интернете.

Форма для отправки js post.

Для того, чтобы отправить "js post" вам потребуется форма:

В форме будет два поля input с типом number.

Одно поле кнопка button.

В которую поместим вызов функции "post" с помощью onclick.

Соберем весь код формы для отправки js post.

<input type="number" name="a" id="id_1"><br>

<input type="number" name="b" id="id_2"><br>

<button onclick="post()">Сумма</button>

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

Выведем весь код формы для отправки js post.

Выведем весь код формы для отправки js post прямо здесь:

В связи с оптимизацией сайта/сайтов - оставлен один живой пример см. здесь.

3. javascript код для js post.

Для того, чтобы отправить данные с помощью "js post" вам понадобится код javascript:

Напишем функцию "post".

Внутри создадим новую "FormData".

С помощью "append" добавляем новый ключ со значением из value каждого поля.

Создаем новый XMLHttpRequest.

С помощью "open" задаём основные параметры запроса.

С помощью send отправляем данные на сервер.

Вызываем обработчик события onreadystatechange, который вызывается всякий раз, когда изменяется состояние свойства readyState.

Проверяем readyState.

Если всё ок, то с помощью innerHTML выводим результат в строку "Сумма".

Соберем весь javascript код для js post.

function post()

{

const data = new FormData()

data.append('num_1', id_1.value)

data.append('num_2', id_2.value)

var xhr = new XMLHttpRequest();

xhr.open('POST', 'php.php' , true);

xhr.send(data);

xhr.onreadystatechange = function()

{

if (xhr.readyState == 4)

{

if(xhr.status == 200)

{

summa.innerHTML = xhr.responseText;

}

}

}

}

4. Php код для js post.

Ну и последний код на сервере в файле "Php", что будем делать?..

Чтобы не присылали всякую фигню, проверим - это число или нет...:

Если это число, то два поля складываем и выводим с помощью echo.

Иначе "Пришлите число".

Php код для js post.

Соберем весь код и поместим в пример.

<?

if(is_numeric ($_POST['num_1']) and is_numeric ($_POST['num_2'])) echo $_POST['num_1'] + $_POST['num_2'];

else echo 'Пришлите число';

5. Скачать код для js post.

Если по какой-то причине вы не смогли воплотить код в реальность, то у вас есть возможность скачать готовый архив zip с выше приведенным примером.

Где скачать код для js post.

С вас чашка кофе и забирайте код здесь.