Python 如何使Flask在HTML中运行函数并在同一页面上打印结果？

我一直在尝试使用我以前写的脚本将阿拉伯数字转换为罗马数字。用户输入数字，我的脚本将它们转换为罗马数字。脚本运行良好，但我试图将其嵌入到网页中的操作并没有达到预期效果。我在谷歌上搜索了解决方案，每个人都告诉我需要从表单中获取价值，我做到了：

                <form action="toroman" method="POST">
                    <input type="number" name="arabic" onChange="toroman(this.value)" oninput="toroman(this.value)">
                    <p>{{ romanfinal }}</p>
                </form>

这是它唯一一次真正起作用的时候，当我试图改变它时，它只会给我错误。请告诉我我到底不了解什么。

您的

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)

然后您可以在HTML顶级中使用值

data

，如下所示：

{{data}

烧瓶

JS

$（文档）.ready（函数（）{
document.getElementById（'toroman_form'）。addEventListener（'keyup'，function（）{
$.ajax({
键入：“POST”，
url:“/toroman”，//数据发送到的路径
数据：$（'#阿拉伯语'）.val（），//输入字段值
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
成功：功能（数据）{
translation=data.translation//从烧瓶接收到响应
$（'#translated'）.text（translation）//以html标记显示翻译
},
错误：函数（）{
警报（“交易失败”）；
}
});
});
}

HTML

您希望您的翻译在索引页上显示，而不是在新创建的页面上显示吗？正确。我也希望它在运行中显示，我的意思是它可以工作，谢谢！但是，当我们进行此操作时。有没有办法在同一页面上执行此操作而不使整个“/toroman”事件发生？并且它只在“Enter”上工作press，有没有一种方法可以一次更改一次？我认为这是可能的，可能是通过

'GET'

请求，但我从未使用过，

'POST'

请求工作得很好，即使有更大的函数和多个参数。是的，你可以在同一页面上完成，而无需重新加载/刷新，只是你需要使用AJAX。我觉得这就是原因您试图通过包含'onChange'eventlistener来实现此目的。谢谢，这正是我想要的。因此AJAX将帮助我加载python脚本？必须找出使用它的热点。谢谢您的回答，但它对我不起作用。索引页上什么都没有发生，如果我按enter键，它将在

methods=['POST']中显示“不允许使用方法”

在

@app.route（“/”，方法=['POST']）中

索引页甚至不会加载。如果没有它，它会加载，但翻译仍然不起作用：c Sorry调整了它。我删除了html中的form方法。我对它进行了更多的处理，并在服务器日志中注意到它总是出错

BadRequestKeyError:400错误请求：浏览器（或代理）发送了一个此服务器无法理解的请求。KeyError:“阿拉伯语”

我尝试更改一些代码，但结果是这样的。然后我更改了此行

arabic=request.form['arabic']

to

arabic=request.data

和要查看的打印数据。脚本运行良好，甚至在标记中显示错误。但这是因为请求的数据是

b'1'

，如果我为examle input“1“在表单字段中。那么如何获取干净的数据呢？我在脚本中这样做，从

b

和

中剥离原始数据，所以它只是一个数字。感谢您的帮助。”。
@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)

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)

$(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");
      }
  });
});
}

<form id="toroman_form">
    <input type="number" id="arabic">
    <p id="translated"><!--translation is dislayed here--></p>
</form>