Отправим js post
Отправим js post на сервер.
- Отступление. Что будем делать?.
- Форма для js post.
- Javascript код для js post.
- Php код для js post.
- Скачать код для js post.
Смотри еще загрузка файла на сервер.
Отступление
Прежде чем начать моё повествование, хочу сказать о теме "js post " вообще и в частности!
О теме js post вообще и в частности!
Вы должны понимать, что любая тема касающаяся программирования и любого языка(здесь будет использоваться javascript и php) вариативна!
Что такое вариативна?
Вариативна - это когда можно выполнить некое действие несколькими способами! И даже в самих функциях, методах возможны варианты! Например данные в "js post" можно отправлять: 1). строкой 2). объектом 3).файлом 4). смешанный из выше перечисленных 3.
Я не пытаюсь объять необъятное!
Потому, что если, перечислять все варианты, то на это уйдет не просто много времени, а очень много времени!
Вы, начав изучать такой "талмуд", скорее всего просто не дочитаете его до конца, поскольку логику начинающего я ещё помню : "мне нужен максимально простой и понятный текст и код, чтобы он работал!".
Поэтому... возьмем самый простой код и пример, чтобы он работал!
Что будем делать?
Отправим из 2 полей ввода два числа на сервер с помощью "js post".
На сервере сложим эти два числа и выведем с помощью "echo".
Получим ответ от сервера и выведем его на страницу.
Форма для 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 прямо здесь:
Сумма равна:
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;
}
}
}
}
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 'Пришлите число';
Скачать код для js post.
Если по какой-то причине вы не смогли воплотить код в реальность, то у вас есть возможность скачать готовый архив zip с выше приведенным примером.
Где скачать код для js post.
С вас чашка кофе и забирайте код здесь.
Что можно сделать!?
Поделиться ссылкой! C друзьями или врагами!
Скоро...
Скоро...
Скоро...