使用烧瓶呈现对html模板的更改

Question

我正在尝试使用python的烧瓶api和javascript来构建一个web应用程序。作为一个简单的例子，我希望有一个文本输入框来打印用户提交后的输入。但是，当我使用烧瓶运行并输入一些文本时，除了将文本从"/5000“重定向到"/5000/? input = text”(其中text是用户输入)之外，没有什么变化。

为什么我看不到输入框下面的“你写的:文本”？

我的代码如下所示：

app.py:

@app.route('/')
def render_home():
    return render_template("base.html")

update.js:

function update() {
    var new_input = document.getElementById("input");
    document.getElementById("demo").innerHTML = "You wrote: " + new_input.value;
}

base.html:

<body>
<form>
    <label for="input">Example Input:</label><br>
    <input type="text" name="input" onchange="update()"><br>
</form>

<p id="demo"></p>

<script type="text/javascript" src="static/js/update.js"></script>
</body>

Answer 1

因此，Flask正在将'submit‘注册为GET请求，这就是它出现在URL中的原因。如果您希望在后端解析这些信息，您可以使用request子模块，这样就可以通过Python实例实际接收数据，使用类似于request.args的东西作为键:值对来接收数据。

from flask import Flask, request

@app.route('/', methods=['GET'])
def render_home():
    req = request.args
    print(req)
    return render_template("base.html")

Answer 2

当您按Enter时，应用程序添加查询参数是正常的，但我认为您的JS函数无法工作，因为getElementById('input')将返回null，因为输入上没有设置id。尝试在输入上设置id，如<input id="myInput"，并使用document.getElementById('myInput')

此外，您在JS功能中有一个错误。您的输入在new_input中，但稍后将使用new_factor。