Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML
Posted
技术标签:
【中文标题】Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML【英文标题】：Python/Flask/HTML - Render HTML in new window instead of home page 【发布时间】：2019-07-14 21:25:17 【问题描述】：我有一个 Python 代码，我在其中使用 Flask 创建网页。在主页中，我正在填写一个表单，使用一个按钮提交，它会根据输入显示一个表格。
我遇到的问题是 一旦我单击按钮提交表单，它就会在同一个网页上呈现表格。我想使用 javascript window.open() 创建一个新窗口或您可能建议的任何其他方法在新窗口中呈现该表并保持主页不变。我试着环顾四周，我似乎无法得到任何工作。我已经阅读了this question 和this question。但这些建议似乎与我正在寻找的不符。
这是我的代码：
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() 或其他东西）？
如果有人能指导我完成如何使用我提供的代码执行此操作的步骤，并具体告诉我在哪里调用函数和类似的东西，我将不胜感激。我是 Flask/HTML/JS 的新手，我只是想学习以供个人使用，我对阅读链接和文档感到沮丧，这些链接和文档显示了如何在新标签中显示像 google.com 这样的 URL，这不是我想要的。谢谢！
【问题讨论】：
试试这个***.com/questions/3951768/… 喜欢这个？ ***.com/questions/44606429/… 【参考方案1】：第一步：Check out this link that explains how to use Jquery and Ajax with 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：
<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 方法，该方法允许我在新选项卡中打开一个 url (more details here)：
window.open('http://127.0.0.1:5000/table', '_blank');
'table' 路由，将之前存储在我的全局变量 (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)
我希望这会对您有所帮助，尽管我相信还有许多其他方法可以做到这一点，也许更有效。
【讨论】：
嗨，托宾，感谢您的详细回答，但在阅读时，我意识到我的问题措辞不正确。我已经进行了编辑以修复它。我的意思是在“新”窗口中打开 table.html，而不是弹出窗口。我不应该称它为弹出窗口。我想在新标签或新窗口中打开它。有什么办法可以做到吗？ @ss1111 我刚刚编辑了我的答案。希望这次能满足你的关心。如有问题，请随时发表评论 我通读并理解了您的代码是如何工作的，现在对我来说很有意义。但是当我尝试它并单击“单击我！”按钮，它似乎没有做任何事情。有什么我做错了吗？当你尝试这个时，它对你有用吗？如果是这样，我肯定在我身边的某个地方有语法错误 确实，当我测试它时效果很好。您的代码中一定有语法错误，或者您可能忘记导入 Jquery。我建议您使用浏览器的检查器来确保 Ajax 请求正常工作。 如有问题，请不要犹豫添加评论。但我非常确定问题一定来自您的 javascript 操作；确保在 body 标记之前导入 jquery，检查 javascript 代码中的分号，如有必要，添加“console.log”并检查控制台是否有反应。它将允许您查看 Ajax 查询是否成功。以上是关于Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML的主要内容，如果未能解决你的问题，请参考以下文章
Javascript 在新选项卡（而不是窗口）中打开 URL