Flask-wtforms: умножить два числа из двух разных полей ввода и заполнить результат в третьем поле ввода без обновления страницы

Question

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

Пример: -

Код: - forms.py

class Multiply(FlaskForm):
    number1 = IntegerField("number1")
    number2 = IntegerField("number2")
    result = IntegerField("result")

rout.py

@app.route('/multiply')
def multiply():
    form = Multiply()
    return render_template('multiply.html', form=form)

multiply.html

<form>
    {{ form.number1.label }} {{ form.number1(class="form-control") }}
    {{ form.number2.label }} {{ form.number2(class="form-control") }}
    {{ form.result.label }} {{ form.result(class="form-control") }}
</form>

Я новичок в этом, поэтому я не знаю, как это сделать.

Answer 1

Вы найдете, что этот точный пример описан в документации Flask. См. Пример AJAX с jQuery .

Функция просмотра JSON:

from flask import Flask, jsonify, render_template, request
app = Flask(__name__)

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

@app.route('/')
def index():
    return render_template('index.html')

HTML-шаблон:

<script type=text/javascript>
 $(function() {
  $('a#calculate').bind('click', function() {
   $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
    a: $('input[name="a"]').val(),
    b: $('input[name="b"]').val()
   }, function(data) {
    $("#result").text(data.result);
   });
   return false;
  });
 });
</script>
<h1>jQuery Example</h1>
<p><input type=text size=5 name=a> +
 <input type=text size=5 name=b> =
 <span id=result>?</span>
<p><a href=# id=calculate>calculate server side</a>

Answer 2

То, что вы пытаетесь сделать, это динамически обновлять ваше представление. HTML нуждается в помощи javascript для динамического обновления страницы (в вашем случае результат).

Это можно сделать с помощью вызова AJAX API, написанного на вашем бэкэнде, который получает ваши два значения в виде данных, вычисляет результат и отправляет его обратно (возможно, одновременно сохраняя его).

Подробнее