问题描述
我有一个使用Flask创建网页的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中的表在新窗口中打开 （也许使用Windows中的 window.open() JavaScript或其他内容）？
如果有人可以指导我完成提供的代码来执行此操作的步骤，并特别向我展示在何处调用函数之类的东西，我将不胜感激。 我是新来瓶/ HTML / JS，我只是想学仅供个人使用，我得到的是只显示了如何在一个新的选项卡中显示如google.com的URL， 这是沮丧的阅读链接和文档不是我想要的 谢谢！
1楼
Tobin
2
已采纳
2019-02-21 15:32:47
步骤1 ：
这里的关键概念是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() {这会将ajax请求发送到FLASK，该请求包括执行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'路由将先前存储在我的全局变量（ user_input ）中的数据存储在变量x中，然后调用get_table（）函数（通过向他传递变量x in参数），该函数返回字典列表，并且最后，它返回page.html页面， 其中带有在参数中的字典列表：
x = user_input dict_table = get_table(x) return render_template('table.html', dict_table=dict_table)
我希望这会对您有所帮助，即使我确信还有很多其他方法可以这样做，也许更有效。