使用 python flask 在同一页面中显示结果答案

【问题标题】：Display Result in Same Page Using python flask使用 python flask 在同一页面中显示结果
【发布时间】：2019-07-08 13:01:18
【问题描述】：

我正在使用 python flask 将表单数据发送到另一个 HTML 模板。我需要在存在 HTML 输入表单的同一页面中显示结果。目前正在将响应转发到下一页。

我尝试通过 JQuery 运行但仍然无法得到结果。

app.py

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def student():
   return render_template('index.html')

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

if __name__ == '__main__':
   app.run(debug = True)

index.html

<html>
   <body>
      <form action = "http://localhost:5000/result" method = "POST">
         <p>Name <input type = "text" name = "Name" /></p>
         <p>Physics <input type = "text" name = "Physics" /></p>
         <p>Chemistry <input type = "text" name = "chemistry" /></p>
         <p>Maths <input type ="text" name = "Mathematics" /></p>
         <p><input type = "submit" value = "submit" /></p>
      </form>
   <div>
   </div>
    </body>
</html>

结果.html

<!doctype html>
<html>
   <body>
      <table border = 1>
         {% for key, value in result.items() %}
            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>
         {% endfor %}
      </table>
   </body>
</html>

现在结果显示在 result.html 中，我需要将其显示在 index.html 中。请提出建议，如何实现这一点。

【问题讨论】：

标签： python flask jinja2

【解决方案1】：

如果我正确理解您的问题，我可以看到多种方式：

1)
您可以将您的result.html 包含在您的index.html 中。
然后，您只需将结果数据传递给 render_template 函数。
阅读更多关于模板的信息 here

它看起来像这样：

{% include 'result.html' %}

在index.html
result.html 看起来像：

<div id="result_div">
  some code
</div>

2)
您可以使用 AJAX 发布表单数据，在烧瓶中生成 html，将其作为 AJAX 结果传递并通过 javascript 更新您的页面。

$.ajax({
                        type: 'POST',
                        url: '/result',
                        data: JSON.stringify({
                            'data' : data,
                        }),
                        contentType: 'application/json;charset=UTF-8',
                        success: function(response){
                            // fill with html
                            $('#result_div').html(response.result);

                        },
                        error: function(error) {
                            // console.log(error);
                        }
                    });

当然，您也必须在 /results 上更新您的烧瓶代码。

在这两种情况下，您都希望拥有一个页面（可以包含多个 html 文件）。

【讨论】：

【解决方案2】：

我知道这是一个较老的问题，但对于其他可能感兴趣的人来说。你所要做的就是改变

return render_template("result.html",result = result)

到

return render_template("index.html",result = result)

或您可能想要返回的任何其他页面。 Render_template 只返回您要求的任何内容，如果您只想返回数据，或者您可以说的其他内容

return (data)

或任何你的数据被调用。

【讨论】：