Как я могу сложить значения из формы в Python Flask

Question

Я хочу суммировать значения из формы в Python Flask. Как я могу это сделать?

<form action="/count_daily_calories" method="post">
      <p>Input 1: <input type="text" name="daily_calories" value="input"></p>
      <p>Input 2: <input type="text" name="daily_calories" value="input"></p>
      <input type="submit" value="Calculate">
      <p>Result: <input type="text" name="result_dc" value="result"></p>
</form>

Flask Код:

@app.route('/daily_intake')
def daily_intake():
    if 'user_id' not in session:
        return redirect('/')
    return render_template("daily_intake.html")

Здесь я продолжаю получать все ошибки:

@app.route('/count_daily_calories', methods=['POST'])
def count_daily_calories():
    if 'user_id' not in session:
        return redirect('/')
    float(request.form['result']) += float(request.form['input'])
    return redirect('/daily_intake')

Я продолжаю получать ошибки не могут быть отнесены к вызову функции

Answer 1

Будет проще сделать все в одной функции. Используя redirect, вам нужно будет сохранить значения в файлах cookie, чтобы впоследствии получить их из файлов cookie после перенаправления, и поместить их в форму

. Я получаю значения из браузера с помощью request.form, преобразовываю их в float () и затем сумма значений. Когда у меня есть результат, я снова отображаю страницу со значениями - и использую {{ result }} в HTML, чтобы поместить значения в правильное место.

В примере я использую render_template_string вместо render_template только для его проще скопировать и запустить - все будет в одном файле.

from flask import Flask, request, render_template_string

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():

    if request.method == 'POST':
        vals = request.form.getlist('daily_calories')
        val1 = float(vals[0])
        val2 = float(vals[1])
        result = val1 + val2
    else:
        val1 = ''
        val2 = ''
        result = ''

    return render_template_string('''
<form action="/" method="POST">
<p>Input 1: <input type="number" name="daily_calories" value="{{ val1 }}"></p>
<p>Input 2: <input type="number" name="daily_calories" value="{{ val2 }}"></p>
<input type="submit" value="Calculate">
<p>Result: <input type="number" name="result_dc" value="{{ result }}"></p>
</form>
''', val1=val1, val2=val2, result=result)

app.run()

---

РЕДАКТИРОВАТЬ: Аналогичный пример с использованием только JavaScript для получения значений, вычисления суммы и ее сложения сообщить. Он блокирует кнопку для отправки данных на сервер и flask не должен рассчитывать их.

Если пользователь не использует JavaScript, он не будет работать, и ему потребуется смешивание с предыдущей версией.

from flask import Flask, request, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
<form action="/" method="post">
      <p>Input 1: <input type="number" name="daily_calories" value="" id="val1"></p>
      <p>Input 2: <input type="number" name="daily_calories" value="" id="val2"></p>
      <input type="submit" value="Calculate" id="button_calculate">
      <p>Result: <input type="number" name="result_dc" value="" id="result"></p>
</form>
<script>
var val1_input = document.getElementById("val1");
var val2_input = document.getElementById("val2");
var result_input = document.getElementById("result");
var button_input = document.getElementById("button_calculate");
button_input.onclick = function(event) {
    result_input.value = parseFloat(val1_input.value) + parseFloat(val2_input.value);
    //event.preventDefault(); // don't send to server
    return false; // don't send to server
}
</script>
''')

if __name__ == '__main__':
    app.run()

---

РЕДАКТИРОВАТЬ:

В этом примере используется чистый JavaScript для отправки AJAX на URL /calculate, который отправляет результат.

from flask import Flask, request, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
<form action="/" method="POST">
      <p>Input 1: <input type="number" name="daily_calories" value="" id="val1"></p>
      <p>Input 2: <input type="number" name="daily_calories" value="" id="val2"></p>
      <input type="submit" value="Calculate" id="button_calculate">
      <p>Result: <input type="number" name="result_dc" value="" id="result"></p>
</form>
<script>
var val1_input = document.getElementById("val1");
var val2_input = document.getElementById("val2");
var result_input = document.getElementById("result");
var button_input = document.getElementById("button_calculate");

button_input.onclick = function(event) {
    var formData = new FormData();

    formData.append('val1', val1_input.value)
    formData.append('val2', val2_input.value)

    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200)
        {
            //alert(request.responseText);
            result_input.value = request.responseText;
        }
    }

    request.open('POST', "/calculate");

    // execute the request
    request.send(formData);

    return false; // don't send button to server
}
</script>
''')

@app.route('/calculate', methods=['POST'])
def calcualte():
    val1 = float(request.form.get('val1'))
    val2 = float(request.form.get('val2'))

    return str(val1+val2)

if __name__ == '__main__': 
    app.run()