Flask-wtforms：将两个不同输入字段中的两个数字相乘并将结果填充到第三个输入字段中而不刷新页面答案

【问题标题】：Flask-wtforms: Multiply two numbers from two different input fields and populate the result in third input field without refreshing the pageFlask-wtforms：将两个不同输入字段中的两个数字相乘并将结果填充到第三个输入字段中而不刷新页面
【发布时间】：2020-02-20 01:45:14
【问题描述】：

我正在开发一项功能，如果我将值输入到两个不同的输入字段，那么我应该相乘并显示到第三个输入框中而不刷新页面。

例子：-

代码：- forms.py

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

routes.py

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

乘法.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>

我是新手，所以我不知道该怎么做。

【问题讨论】：

看来您需要 AJAX、Angular 或其他 javascript 库之类的东西来为您执行此操作。检查一下！

标签： flask flask-wtforms flask-restful

【解决方案1】：

你会发现这个确切的例子在 Flask 文档中有描述。 See the AJAX with jQuery example here.

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>

【讨论】：

【解决方案2】：

您正在尝试做的是动态更新您的视图。 HTML 需要 javascript 的帮助来动态更新页面（在你的情况下是结果）。

这可以通过对后端编写的 API 的 AJAX 调用来完成，该 API 接收您的两个值作为数据并计算结果并将其发送回（可能同时存储它）。

More info

【讨论】：