Harrix Сложение двух чисел в HTML с передачей параметров через POST (клиентское приложение)
Напишем приложение сложение двух чисел на HTML, где сложение двух чисел происходит на стороне сервера.
Постановка задачи
В статье | ↗️ показан пример приложения на HTML + JavaScript по сложению двух чисел. И там сложение двух чисел происходило в самом приложении, что логично. Серверной части там нет.
В статье | ↗️ показа пример приложения, где клиентская и серверная часть объединены в одном PHP скрипте.
А в этом приложении мы из полей ввода считаем два числа и отправим их на сервер, который сложит два числа, отправит нам ответ, и мы этот ответ отобразим в текстовом поле. То есть у нас клиентская и серверная часть разделены между собой.
На сервер поступает HTTP запрос с двумя переменными a и b. Переменные a и b передаются через POST параметры.
Серверная часть
У вас должен быть сервер, доступный из Интернета, к которому можно обращаться.
В статье | ↗️ приведен пример серверной части на Java.
В статье | ↗️ приведен пример серверной части на PHP.
В статье буду использовать PHP скрипт, который я расположил по адресу https://github.com/Harrix/harrix.dev-articles-2017/tree/main/add-2-num-php-post/demo (если перейти по ссылке без параметров, то должно выдаваться error).
Создание болванки
Создаем текстовой документ под именем index.html.
Закинем в него простую болванку HTML5 документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Программа сложения двух чисел</title>
</head>
<body></body>
</html>
Если мы сохраним документ и откроем в браузере, то увидим пустое белое окно, так как ничего видимого в документе пока нет — это просто болванка с шапкой, где располагаются некоторые мета-тэги (по сути их тоже можно было выкинуть), и пустое тело.
Наполнение HTML
Так как нам нужно приложение, которое будет складывать два числа, то нужно два поля ввода текстовой информации. Следовательно, их нужно будет размещать в некоторой форме. Поэтому в теле HTML документа <body></body> разместим такую форму:
<form>
<input name="a" type="text" value="2" /><br />
<input name="b" type="text" value="3" /><br />
</form>
Каждое поле имеет своё имя name (не id) с названием переменной a и b. Также они имеют начальное наполнение.
Нам нужна кнопка для вычислений. Обычно на форме используется input тэг с type=submit:
<input type="submit" value="Сложить 2 два числа" />
У нас сложение двух чисел будет происходить не на стороне клиента, а на стороне сервера. Поэтому форме нужно указать адрес сервера, куда мы отправим запрос. Обратите внимание на то, что параметр method принимает значение post:
<form
action="https://harrix.dev/ru/articles/2017/add-2-num-php-post/demo/"
method="post"
></form>
Общий документ будет иметь вид:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Программа сложения двух чисел</title>
</head>
<body>
<form
action="https://harrix.dev/ru/articles/2017/add-2-num-php-post/demo/"
method="post"
>
<input name="a" type="text" value="2" /><br />
<input name="b" type="text" value="3" /><br />
<input type="submit" value="Сложить 2 два числа" />
</form>
</body>
</html>
Если мы сохраним документ и его откроем, то получим следующее:
Рисунок 1 — Получившаяся HTML страница
Если нажмем на кнопку, то мы перейдем на страницу сервера, где будет отображен результат работы сервера:
Рисунок 2 — Результат выполнения программы