按下按钮后，使用 Flask 打印 HTML 中的文本框文本答案

【问题标题】：Print a text of textbox in HTML with Flask after pressing a button按下按钮后，使用 Flask 打印 HTML 中的文本框文本
【发布时间】：2021-05-23 10:37:15
【问题描述】：

这是我在 Flask 中的第一次练习，我想了解我在这里做错了什么。

我想在文本框中插入文本，然后在 HTML 中可视化它我已经在 StackOverflow 上看过很多答案，包括： Set a python variable in flask with a button and javascript

这是我的python代码：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def my_form():
    return render_template('test.html')

@app.route("/", methods=['GET','POST'])
def func_test():
    if request.method == 'POST':
        text = request.form['Value1']
        return render_template('test.html', value1=text)

if __name__ == "__main__":
    app.run(port=5000, debug=True)

这是我的 HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form methods="POST">
<p>Login </p><br>
    <p>Value1 <input type = "text" name = "Value1" /></p>
    <p><input type = "submit" value = "submit" name = "submit" /></p>

</form>
input is {{value1}}
</body>
</html>

我想要的是在文本框中写入文本并按下按钮后，在input is之后打印文本

谢谢

【问题讨论】：

标签： python html flask web-applications

【解决方案1】：

好吧，您可以将 txt 结果包装在 if 块中，该块仅在有值时显示

   {% if value %}
   input is {{value1}}
   {% else %}
    input is: 
    {% endif %}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="POST">
<p>Login </p><br>
    <p>Value1 <input type = "text" name = "Value1" /></p>
    <p><input type = "submit" value = "submit" name = "submit" /></p>

</form>
input is {{value1}}
</body>
</html>

【讨论】：

嗨@Ade_1 感谢您的回答。我想要的是文本“输入是”总是在那里，然后在按下按钮后输入。目前按下按钮后文本不显示
感谢您的更新，但我仍然看不到文本框中给出的输入。我认为其他地方有一些错误
问题出在你的html中，你写的是方法而不是方法...

【解决方案2】：

您希望接受来自 HTML 表单的用户输入，并将其返回到页面。据我所知，您将需要某种异步 Javascript（又名 AJAX）来完成这项工作。

以下是根据您的情况从How to display a returned input in Flask using Ajax? 修改的完整示例。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>    
        <p>Login </p><br>
        <form action='/process' method="POST" autocomplete="off">
            <div>
                <p>Value1 <input type="text"  name="value1" id="value1"></p>
                <p><button type="submit">Submit</button></p>
            </div>
         </form>
         <p id="input_is"></p>
    </body>
</html>

异步 Javascript/AJAX，将其放入您的 static 目录中名为 script.js 的文件中：

$(document).ready(function() {
    $('form').on('submit', function(event) {       
      $.ajax({
         data : {
            value1 : $('#value1').val(),            
                },
            type : 'POST',
            url : '/process'
           })           
       .done(function(data) {                 
        $('#input_is').text(data['response']).show();      
     });
     event.preventDefault();
     });     
});

还有你的 Flask 路线：

from flask import jsonify # add to your existing import 

@app.route('/process', methods=['POST'])
def process():          
    user_input = request.form['value1']
    print(user_input) # just for debugging purposes
    return jsonify({'response' : user_input})

【讨论】：