Простейший калькулятор в браузере

@supmener · Регистрация: 26.06.2013

Студворк — интернет-сервис помощи студентам

Например, вот код двух полей, куда пользователь вводит два числа. Как реализовать бэкэнд, в отдельном от этого кода файле, который будет на сервере складывать два числа и выводить на странице результат сложения? На Джаваскрипт решение не подходит, так как надо, чтобы с сервера нельзя было скачать скрипт вычислений или просмотреть его содержимое.

HTML5
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="text" id="inpa">
<input type="text" id="inpb">
<button>Рассчитать</button>
</body>
</html>

Добавлено через 33 минуты
Спрашивал на форуме по PHP и человек написал про вариант решения с двумя файлами:

сделать генерацию на php файла с константами js и в коде на js подставить значения из констант при загрузке страницы

В то же время интересует также, какой код может быть, когда всё будет в одном файле.

Рыжий Лис · 04.03.2023, 13:38

render_template is a Flask function from the flask.templating package. render_template is used to generate output from a template file based on the Jinja2 engine that is found in the application's templates folder.

Note that render_template is typically imported directly from the flask package instead of from flask.templating. It is the same function that is imported, but there are less characters to type when you leave off the .templating part.

render_template_string is another callable from the flask.templating package with code examples.

Ой, всё \me offline.

@supmener · 04.03.2023, 20:13 **[ТС]**

Вот этого не заметил в вашем коде, поэтому задал вопрос.

Python
1
from jinja2 import Template

Добавлено через 30 минут
Пример самостоятельно написанного шаблонизатора.
https://eqsash.com/articles/ra... -shablonov

Добавлено через 3 часа 14 минут
Набрал пример из видео Олега Шпагина. Проблема в том, что работает не стабильно. Данные то передаются, то этого не происходит для обоих полей, а только для одного. Вижу передачу данных в адресной строке. Как изменить на POST? Как улучшить этот скрипт для стабильной передачи (пока не задумываясь о корректности вводимых данных для защиты от уязвимостей)?

Фрагмент диалога из комментов к видео:

Valentin Savenkov
2 года назад
Олег, а как сделать так, чтобы числовые данные, введенные пользователем, передавались в обработчик на python в виде переменных, которые можно было бы использовать для вычислений?
1 ответ
Rikishi
3 месяца назад
Передаешь переменные как в ролике, а затем
x=int(имя принятой переменной)
Так со всеми переменными и считай их сколько влезет

Как лучше переделать пример, чтобы получился калькулятор для сложения двух чисел?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Тест считывания данных из формы с помощью Python</h1>
 
    <form action="/cgi-bin/obrabotka.py">
 
        введите Имя: <input type="text" name="in_name"><br />
        введите Комментарий: <input type="text"
        name="in comment"><br />
        <button type="submit">Отправить данные</button>
 
    </form>
</body>
</html>

Запускается через браузер по адресу http://localhost:8000/ после запуска сервера.

Бэкэнд obrabotka.py в папке cgi-bin (структура всех файлов на скриншоте):

Python
1
2
3
4
5
6
7
8
9
10
11
import cgi
 
our_form = cgi.FieldStorage() # сохраняем значения всех полей из формы
 
in_name = our_form.getfirst("in_name", "не задано")
in_comment = our_form.getfirst("in_comment", "не задано")
 
print("Content-type: text/html")
print()
print(in_name)
print(in_comment)

Код для запуска сервера в Линукс:

Code
1
python3 -m http.server --cgi

Код для запуска сервера в Виндовс (нужно перейти в папку с этим скриптом start_server_windows.py, например командой cd):

Python
1
2
3
4
from http.server import HTTPServer, CGIHTTPRequestHandler
server_address = ("", 8000)
httpd = HTTPServer(server_address, CGIHTTPRequestHandler)
httpd.serve_forever()

@supmener · 04.03.2023, 21:20 **[ТС]**

Оказывается, скоро удалят.

Deprecated since version 3.11, will be removed in version 3.13: The cgi module is deprecated (see PEP 594 for details and alternatives).

Добавлено через 25 минут
На каких других серверах можно будет использовать этот код без изменений или что в нем нужно будет модифицировать для адаптации?

Кстати из файла obrabotka.py убрал строку

Python
1
# !/usr/bin/env python3

, так как посчитал, что в Виндовс она не нужна.

Добавлено через 5 минут
https://wiki.python.org/moin/WebServers

Рыжий Лис · 05.03.2023, 05:42

\me вернулся

За тобой конечно забавно наблюдать, но у тебя нет принципа системности. Темы при обучении прыгают от одной к другой, только в предыдущем посте:
* PHP - какого хрена делает PHP в тебе про питон?
* самодельный шаблонизатор на PHP
* чья-то неопознанная видюшка
* html-форма (уже другой бездумно скопированный кусок кода, то есть обучение провалилось) с get-запросом
* cgi для питона, который никто не использует уже лет 15.

Возьми flask - он хоть работать и запускаться будет. И прекрати вспоминать PHP или уходи на него совсем из питона.

У тебя в начале темы был полностью рабочий js и полностью готовая html-форма, оставалось лишь добавить ajax для отправки запроса на сервер и получения результата (+написать обработку на самом сервере - код был мной предоставлен) - но ты и это похерил.

@supmener · 05.03.2023, 07:05 **[ТС]**

самодельный шаблонизатор на PHP

А на Питоне эти же принципы не применимы?

Рыжий Лис · 05.03.2023, 07:07

Применимы, читай str.format

Добавлено через 32 секунды
Но нахрена изобретать своё, если есть готовый тот же jinja2?!

@supmener · 21.07.2023, 23:27 **[ТС]**

Попросил ChatGPT (без шаблонизатора)

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Код на Python для создания двух полей ввода и сложения чисел:
 
```python
from flask import Flask, request, render_template
 
app = Flask(__name__)
 
@app.route('/', methods=['GET', 'POST'])
def calculator():
    if request.method == 'POST':
        num1 = int(request.form['num1'])
        num2 = int(request.form['num2'])
        result = num1 + num2
        return render_template('result.html', result=result)
    return render_template('calculator.html')
 
if __name__ =='__main__':
    app.run()
```
 
Шаблон calculator.html:
```html
<html>
  <body>
    <form action="/" method="post">
      <input type="number" name="num1" placeholder="Введите первое число" required><br>
      <input type="number" name="num2" placeholder="Введите второе число" required><br>
      <input type="submit" value="Сложить">
    </form>
  </body>
</html>
```
 
Шаблон result.html:
```html
<html>
  <body>
    <h1>Результат сложения:</h1>
    <p>{{ result }}</p>
  </body>
</html>
```
 
В этом примере, форма с двумя полями ввода отправляется на сервер в POST запросе, извлекаются значения этих полей, выполняется сложение чисел и выводится результат на странице result.html.

Добавлено через 1 час 30 минут
С шаблонизатором.

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Конечно, вот пример переписанного скрипта на Python с использованием шаблонизатора Jinja:
 
```python
from flask import Flask, render_template, request
 
app = Flask(__name__)
 
@app.route('/', methods=['GET', 'POST'])
def calculator():
    if request.method == 'POST':
        num1 = int(request.form['num1'])
        num2 = int(request.form['num2'])
        result = num1 + num2
        return render_template('result.html', result=result)
    return render_template('calculator.html')
 
if __name__ == '__main__':
    app.run(debug=True)
```
 
В данном примере используется фреймворк Flask и шаблонизатор Jinja. Веб-страницы "calculator.html" и "result.html" содержат форму для ввода чисел и отображения результата соответственно.  
 
Обратите внимание, что для работы с Flask и Jinja необходимо установить их через pip:
 
```
pip install flask
pip install jinja2
```
 
После запуска сервера, вы сможете открыть веб-страницу калькулятора в браузере и использовать его для сложения двух чисел.

Добавлено через 3 минуты
Почти тоже самое

Рыжий Лис · 22.07.2023, 04:48

Ты же ajax хотел?

@supmener · 22.07.2023, 07:29 **[ТС]**

Про шаблонизатор я у ии не попросил.

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
На сервере (файл server.py):
```python
import sys
import http.server
import socketserver
from urllib.parse import urlparse, parse_qs
 
class ServerHandler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        parsed_path = urlparse(self.path)
        query_params = parse_qs(parsed_path.query)
        
        if parsed_path.path == '/add':
            try:
                num1 = int(query_params['num1'][0])
                num2 = int(query_params['num2'][0])
                result = num1 + num2
                self.send_response(200)
                self.send_header('Content-type', 'text/plain')
                self.end_headers()
                self.wfile.write(str(result).encode())
            except:
                self.send_response(400)
                self.send_header('Content-type', 'text/plain')
                self.end_headers()
                self.wfile.write(b'Bad Request')
 
PORT = 8080
Handler = ServerHandler
httpd = socketserver.TCPServer(("", PORT), Handler)
print("Server running on port", PORT)
httpd.serve_forever()
```
 
На клиенте (HTML и JavaScript) (файл index.html):
```html
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1>Калькулятор сложения</h1>
    
    <label for="num1">Первое число:</label>
    <input type="number" id="num1">
    
    <label for="num2">Второе число:</label>
    <input type="number" id="num2">
    
    <button onclick="addNumbers()">Сложить</button>
    
    <p id="result"></p>
 
    <script>
        function addNumbers() {
            var num1 = parseInt($("#num1").val());
            var num2 = parseInt($("#num2").val());
 
            $.ajax({
                url: "http://localhost:8080/add?num1=" + num1 + "&num2=" + num2,
                type: "GET",
                success: function(result) {
                    $("#result").text("Результат сложения: " + result);
                },
                error: function(error) {
                    $("#result").text("Ошибка: " + error.responseText);
                }
            });
        }
    </script>
</body>
</html>
```
 
Выполнить сервер:
```
python server.py
```
 
Открыть в браузере файл index.html и можно будет использовать калькулятор для сложения двух чисел.

Добавлено через 8 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Конечно, вот пример переписанного кода калькулятора на JavaScript с использованием шаблонизатора:
 
index.html:
 
```html
<!DOCTYPE html>
<html>
<head>
    <title>Калькулятор</title>
</head>
<body>
    <h1>Калькулятор</h1>
    <div>
        <label for="num1">Число 1:</label>
        <input type="number" id="num1">
    </div>
    <div>
        <label for="num2">Число 2:</label>
        <input type="number" id="num2">
    </div>
    <div>
        <button id="calculateBtn">Сложить</button>
    </div>
    <div id="result"></div>
 
    <script src="calculator.js"></script>
</body>
</html>
```
 
calculator.js:
 
```javascript
window.addEventListener('DOMContentLoaded', function() {
 
    var calculateBtn = document.getElementById('calculateBtn');
    var resultDiv = document.getElementById('result');
 
    calculateBtn.addEventListener('click', function() {
        var num1 = parseInt(document.getElementById('num1').value);
        var num2 = parseInt(document.getElementById('num2').value);
 
        var result = addNumbers(num1, num2);
 
        resultDiv.innerHTML = '<p>Результат: ' + result + '</p>';
    });
 
    function addNumbers(a, b) {
        return a + b;
    }
 
});
```
 
При нажатии на кнопку "Сложить", введенные числа будут переданы в функцию `addNumbers()`, а результат будет отображен в `<div id="result">`.

Добавлено через 5 минут

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Конечно! Вот пример кода на Python с использованием шаблонизатора и Ajax:
 
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Калькулятор</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Калькулятор</h1>
    <input type="number" id="num1" placeholder="Введите первое число">
    <input type="number" id="num2" placeholder="Введите второе число">
    <button onclick="calculate()">Посчитать</button>
    <p id="result"></p>
 
    <script>
        function calculate() {
            var num1 = $("#num1").val();
            var num2 = $("#num2").val();
            
            $.ajax({
                url: "/calculate",
                type: "POST",
                data: {num1: num1, num2: num2},
                success: function(response) {
                    $("#result").text("Результат: " + response);
                }
            });
        }
    </script>
</body>
</html>
```
 
```python
# main.py
from flask import Flask, render_template, request
 
app = Flask(__name__)
 
@app.route("/")
def index():
    return render_template("index.html")
 
@app.route("/calculate", methods=["POST"])
def calculate():
    num1 = int(request.form.get("num1"))
    num2 = int(request.form.get("num2"))
    result = num1 + num2
    return str(result)
 
if __name__ == "__main__":
    app.run()
```
 
В этом примере мы использовали Flask для создания сервера. При отправке формы на клиентской стороне, используется функция calculate(), которая собирает значения из полей ввода и отправляет их на сервер с помощью Ajax запроса методом POST. На сервере происходит сложение двух чисел, а затем результат возвращается и отображается на странице.
 
Убедитесь, что у вас установлен Flask, прежде чем запускать данный код.

Новые блоги и статьи Все статьи Все блоги /
Особенности gif сгенерированных в Си russiannick 21.10.2026 Рассмотрим генерацию gif файлов, которые в Си имеют свои особенности. Gif представляет собой графический формат популярный в интернете. Посмотрим на палитру. Gif файл сгенерированный в си отличается. . .	FPS контроллер с анимированными Y-Bot и 3D-звуком miniaudio (Box3D, Recast, BehaviorTree.CPP, ozz-animation, ImGui, OpenGL и SDL3) 8Observer8 18.10.2026 Содержание блога \| English Version Полное мультиплатформенное руководство по стартовому проекту с FPS-контроллером игрока, анимированными роботами Y-Bot с 4-слойным блендингом, 3D-физикой Box3D,. . .	Локальный http сервер Argus19 17.10.2026 Локальный http сервер На работе, на двух локальных компьютерах круглосуточно работают программы опроса приборов с записью в книги Excel,которые раз в сутки записываются на сервер компании. Т. к. . . .	Копировать Windows на новый диск на UEFI damix 17.10.2026 https:/ / uriesk. wordpress. com/ 2016/ 11/ 01/ move-window-10-to-ssd-on-a-uefi-dualboot-system-with-basic-linux-tools/ TL DR Вставляем диск, а старый подключаем через переходник, грузимся с лайва. . .
ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .

Рыжий Лис Просто Лис 5973 / 3735 / 1099 Регистрация: 17.05.2012 Сообщений: 10,791 Записей в блоге: 9
	05.03.2023, 05:42
	\me вернулся За тобой конечно забавно наблюдать, но у тебя нет принципа системности. Темы при обучении прыгают от одной к другой, только в предыдущем посте: * PHP - какого хрена делает PHP в тебе про питон? * самодельный шаблонизатор на PHP * чья-то неопознанная видюшка * html-форма (уже другой бездумно скопированный кусок кода, то есть обучение провалилось) с get-запросом * cgi для питона, который никто не использует уже лет 15. Возьми flask - он хоть работать и запускаться будет. И прекрати вспоминать PHP или уходи на него совсем из питона. У тебя в начале темы был полностью рабочий js и полностью готовая html-форма, оставалось лишь добавить ajax для отправки запроса на сервер и получения результата (+написать обработку на самом сервере - код был мной предоставлен) - но ты и это похерил. 1

Рыжий Лис Просто Лис 5973 / 3735 / 1099 Регистрация: 17.05.2012 Сообщений: 10,791 Записей в блоге: 9
	05.03.2023, 07:07
	Применимы, читай `str.format` Добавлено через 32 секунды Но нахрена изобретать своё, если есть готовый тот же jinja2?! 0

Рыжий Лис Просто Лис 5973 / 3735 / 1099 Регистрация: 17.05.2012 Сообщений: 10,791 Записей в блоге: 9
	22.07.2023, 04:48
	Ты же ajax хотел? 0