如何让 Flask 在 HTML 中运行并在同一页面打印结果？

Question

我一直在尝试使用我之前编写的脚本将阿拉伯数字转换为罗马数字。用户输入数字，我的脚本将它们转换为罗马数字。脚本运行良好，但我尝试将其嵌入网页时无法正常工作。我用谷歌搜索了解决方案，每个人都告诉我需要从表单中获取值，我这样做了：                <form action="toroman" method="POST">                    <input type="number" name="arabic" onChange="toroman(this.value)" oninput="toroman(this.value)">                    <p>{{ romanfinal }}</p>                </form>这是我的 server.py，它应该打印出同一页的编号，但它并没有这样做，而是当我在提交值时按“Enter”时它会创建一个新页面并显示正确答案。from flask import Flask, render_template, requestapp = Flask(__name__)@app.route("/")def index():    return render_template("index.html")@app.route("/toroman", methods=['POST'])def toroman():    arabic = request.form['arabic']    # some unnecessarily numerous lines of code that basically turn Arabic-system number to Roman system    return romanfinalif __name__ == "__main__":    app.run(debug=True)这就像它唯一一次真正起作用，当我尝试将其更改为其他内容时，它只会给我错误。请告诉我我到底不明白什么。

Answer 1

你的toroman():函数应该返回带有参数的 index.html ：

@app.route("/toroman", methods=['POST'])

def toroman():

    arabic = request.form['arabic']

    # some unnecessarily numerous lines of code that basically turn Arabic-system number to Roman system

    return render_template("index.html", data = romanfinal)

data然后你可以像这样在你的 HTML 顶层使用这个值：{{data}}

Answer 2

烧瓶

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route("/")

    def index():

return render_template("index.html")

@app.route("/toroman", methods=['POST'])

def toroman():

    arabic = request.data['arabic']

    #pass arabic into your translation function

    translation = translate()

    #return JSON response to AJAX

    return jsonify(translation = translation)

if __name__ == "__main__":

    app.run(debug=True)

JS

$(document).ready(function(){

  document.getElementById('toroman_form').addEventListener('keyup', function() {

   $.ajax({

        type: 'POST',

        url: '/toroman', //flask route to which data is sent

        data: $('#arabic').val(), // input field value

        contentType:'application/json; charset=utf-8',

        dataType: "json",

        success: function(data) {

            translation = data.translation //response received from flask

            $('#translated').text(translation) //display translation in html <p> tag

        },

        error: function() {

            alert("Transaction Failed");

      }

  });

});

}

HTML

<form id="toroman_form">

    <input type="number" id="arabic">

    <p id="translated"><!--translation is dislayed here--></p>

</form>