Question

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

我遇到的问题是，单击按钮提交表单后，它将在同一网页上呈现表格。我想使用JavaScript {{1 }}或其他建议使用的方法，可以在新窗口中呈现该表并保留主页。我试着环顾四周，似乎什么也无法工作。我已经阅读了this question和this question。但是这些建议似乎与我的需求不符。

这是我的代码：

Python代码

window.open()

home.html

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)

table.html

<!DOCTYPE html>
<html>
<head>
   <title>Homepage</title>
</head>
<body>
        <form action="/table" method="post">
            <select name="input">
               <option value="1">Input</option>
            </select>
           <button type="submit">Click Me!</button>
        </form>
</body>
</html>

有人可以清楚地说明我如何单击主页上的表单提交按钮，停留在主页home.html上，并使table.html中的表在新窗口中打开 >（也许使用JavaScript中的<!DOCTYPE html> <html> <head> <title>Table</title> </head> <body> <table id="table"> {% if dict_table %} <tr> {% for key in dict_table[0] %} <th>{{ key }}</th> {% endfor %} </tr> {% endif %} {% for dict in dict_table %} <tr> {% for value in dict.values() %} <td>{{ value }}</td> {% endfor %} </tr> {% endfor %} </table> </body> </html>或其他方式）？

如果有人可以指导我完成提供的代码的操作步骤，并特别向我展示在何处调用函数之类的东西，我将不胜感激。我是Flask / HTML / JS的新手，我只是想尝试个人学习，而阅读链接和文档时却感到沮丧，这些链接和文档仅显示了如何在新标签中显示google.com之类的网址>这不是我想要的。谢谢！

Answer 1

第1步：Check out this link that explains how to use Jquery and Ajax with FLASK

此处的关键概念是AJAX（异步JavaScript和XML ）。简而言之，它是一种架构，可以在后台将请求发送到服务器（称为异步请求），然后根据从服务器接收到的结果修改Web浏览器当前显示的页面的内容，避免了以及服务器无法再次传输完整页面。

第二步：解决问题的方法

首先我们编写路线：

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 ：

<select id="input" name="input">
    <option value="1">Input</option>
</select>
<button type="button" class="test"> Click Me! </button>

<script>
    $(document).ready(function(){
        $('.test').bind('click', function() {
            $.getJSON($SCRIPT_ROOT + '/_ajax_user_input',{
                user_input: $('#input').val(),
            },function() {
                window.open('http://127.0.0.1:5000/table', '_blank');
            });
            return false;
        });
    });
</script>

table.html ：

<table id="table">
    {% if dict_table %}
        <tr>
            {% for key in dict_table[0] %}
                <th>{{ key }}</th>
            {% endfor %}
        </tr>
    {% endif %}

    {% for dict in dict_table %}
        <tr>
            {% for value in dict.values() %}
                <td>{{ value }}</td>
            {% endfor %}
        </tr>
    {% endfor %}
</table>

基本上就是这样：

当我单击按钮时，我会调用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方法，该方法可让我在新标签页（more details here）中打开网址：
```
 window.open('http://127.0.0.1:5000/table', '_blank');
```
“表”路由将先前存储在我的全局变量（ user_input ）中的数据存储在变量x中，然后调用函数 get_table（） >（向他传递变量x in参数），该变量返回字典列表，最后返回带有参数字典列表的页面 table.html ：
```
 x = user_input
 dict_table = get_table(x)
 return render_template('table.html', dict_table=dict_table)
```

我希望这会对您有所帮助，即使我确信还有很多其他方法可以这样做，也许更有效。

Python / Flask / HTML-在新窗口而非首页中呈现HTML

1 个答案: