Python/Flask/HTML - 渲染HTML在新窗口而不是主页上。

78 浏览
0 Comments

Python/Flask/HTML - 渲染HTML在新窗口而不是主页上。

我有一个Python代码，在其中使用Flask创建网页。在首页，我填写表单，使用按钮提交，它会根据输入显示一个表格。

我遇到的问题是，一旦我点击提交表单的按钮，它会在同一个网页上呈现表格。我想使用JavaScript window.open() 或者任何其他方法，创建一个新窗口，在新窗口中呈现该表格，并保持主页不变。我尝试寻找解决办法，但似乎找不到。我已经阅读了 这个问题 和 这个问题。但是这些建议似乎与我正在寻找的不符。

这是我的代码：

Python 代码

from flask import Flask, render_template, request,
app = Flask(__name__)
def get_table(user_input):
...
return dict    //returns list of dictionaries, for example... 
               //dict = [{'name':'Joe','age':'25'},
               //        {'name':'Mike','age':'20'}, 
               //        {'name':'Chris','age':'29'}] 
@app.route("/")
def home():
    return render_template('home.html')
@app.route("/table", methods = ['POST'])
def table():
    user_input = request.form['input']
    dict_table = get_table(user_input)     //return list of dictionaries
    return render_template('table.html', dict_table=dict_table)
if __name__ == '__main__':
    app.run(debug=True)

home.html

 

table.html



   


        {% if dict_table %}
            {% for key in dict_table[0] %}
            {% endfor %}
        
        {% endif %}
        {% for dict in dict_table %}
        
            {% for value in dict.values() %}
            {% endfor %}
        
        {% endfor %}
{{ key }}
{{ value }}

 

能否有人清楚地解释一下如何在我的主页上单击表单提交按钮，仍然停留在主页 home。HTML上，让来自table.html的表格在新窗口中打开（也许使用 JavaScript 的 window.open() 或其他方法）？

如果有人能够为我提供步骤，并具体指出在何处调用函数等，我将不胜感激。我是 Flask/HTML/JS 的新手，只是为了个人使用而学习，我已经阅读了一些只说明如何在新标签中显示像google.com这样的网址的链接和文档，这不是我想要的。谢谢！

admin 更改状态以发布 2023年5月22日
0

1 答案

0 Comments

步骤1： 查看这个链接，它解释了如何使用 JQuery 和 AJAX 与 FLASK

这里的关键概念是 AJAX（异步 JavaScript 和 XML）。简而言之，它是一种使发送请求到服务器成为可能的架构（称为异步请求），然后根据从服务器接收到的结果修改当前正在显示的网页浏览器内容，从而避免了服务器重新传输完整页面。

步骤2：您的问题的解决方案

  • 首先，我们编写路由：

    from flask import Flask, render_template, request,
app = Flask(__name__)
user_input = None
def get_table(user_input):
    ...
    return dict    # returns list of dictionaries, for example... 
                   # dict = [{'name':'Joe','age':'25'},
                   #         {'name':'Mike','age':'20'}, 
                   #         {'name':'Chris','age':'29'}] 
@app.route('/')
def home():
    return render_template('home.html')
@app.route('/_ajax_user_input')
def ajax_user_input():
    global user_input
    user_input = request.args.get('user_input', 0, type=int)
    return "ok"
@app.route("/table")
def table():
    x = user_input
    dict_table = get_table(x)     # return list of dictionaries
    return render_template('table.html', dict_table=dict_table)

  • 然后我们修改模板：

  • home.html：

  • table.html：

         
         {% if dict_table %}
             
                 {% for key in dict_table[0] %}
                     
                 {% endfor %}
             
         {% endif %}
         {% for dict in dict_table %}
             
                 {% for value in dict.values() %}
                     
                 {% endfor %}
             
         {% endfor %}
     
    {{ key }}
    {{ value }}

基本上这里所发生的是：

  • 当我点击按钮时，我调用 JavaScript 脚本：

       $('.test').bind('click', function() {

  • 这会向 FLASK 发送一个 AJAX 请求，并执行 ajax_user_input() 函数：

       $.getJSON($SCRIPT_ROOT + '/_ajax_user_input',

  • 向该函数发送数据（用户在 select 标记中选择的值），并将此数据存储在变量 user_input 中：

       user_input: $('#input').val(),

  • 在 Flask 的一侧，我获取数据并在一个名为 user_input 的全局变量中存储它：

       global user_input
   user_input = request.args.get('user_input', 0, type=int)

  • 然后在我的脚本中调用一个允许我在新标签页中打开网址的JavaScript方法（更多细节请点击这里）：

       window.open('http://127.0.0.1:5000/table', '_blank');

  • 'table'路由将先在变量x中存储先前存储在我的全局变量user_input中的数据，然后调用函数get_table()（将变量x作为参数传递给它），该函数返回一个字典列表，最后将参数为字典列表的页面table.html返回：

       x = user_input
   dict_table = get_table(x)
   return render_template('table.html', dict_table=dict_table)

我希望这能帮到你，尽管我相信还有很多其他方法可以实现，也许更有效。

0