我有一个python代码，我在其中使用烧瓶来创建一个网页。在主页中，我正在填写表格，使用按钮提交，并根据输入显示表。
我遇到的问题是单击按钮提交表单后，它会在同一网页上呈现表。我想使用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
<!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>
table.html
<!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>
有人可以清楚地解释如何单击主页上的表单提交按钮，留在主页home.html上，然后从table.html打开表格。>（也许使用JavaScript或其他内容使用window.open()）？
，如果有人可以带我完成如何使用我的代码来完成此操作的步骤，并特别向我展示在哪里调用函数和类似的东西，我将不胜感激。我是瓶/html/js的新手>这不是我想要的。谢谢！
step1 ：查看此链接，该链接说明了如何使用jquery和ajax用烧瓶
这里的关键概念是Ajax（异步JavaScript和XML ）。简而言之，这是一种架构，可以在后台将请求发送到服务器（称为异步请求），然后根据从服务器接收到的结果修改Web浏览器当前显示的页面内容，避免使用为以及服务器不会再次发送完整的页面。
step2 ：解决问题的解决方案
-
首先，我们编写路由：
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() { -
这将AJAX请求发送到烧瓶，该请求包括执行 ajax_user_input（）函数：
$.getJSON($SCRIPT_ROOT + '/_ajax_user_input', -
到此功能我发送一个数据（用户在选择标签中选择的值），并且此数据存储在变量 user_input 中：
user_input: $('#input').val(), -
在烧瓶的侧面我获取数据，然后将其存储在我命名 user_input 的全局变量中：
global user_input user_input = request.args.get('user_input', 0, type=int) -
然后，在我的脚本中，我称之为JavaScript方法，该方法允许我在新选项卡中打开一个URL（更多详细信息在此处）：
window.open('http://127.0.0.1:5000/table', '_blank'); -
"表"路由，存储在变量x中x之前存储在我的全局变量（ user_input ）中的数据，然后调用函数 get_table（）通过将他传递给参数中的变量x），该变量X返回字典列表，最后它返回页面 table.html ，其中包含参数中的字典列表：
x = user_input dict_table = get_table(x) return render_template('table.html', dict_table=dict_table)
我希望这对您有帮助，即使我确信还有许多其他方法可以做到这一点，也许更有效。