ss1*_*111 4 html javascript python flask
我有一个 Python 代码，我使用 Flask 创建一个网页。在主页中，我正在填写一个表单，使用按钮提交，它会根据输入显示一个表格。
我遇到的问题是，一旦我单击按钮提交表单，它就会在同一网页上呈现表格。我想使用 JavaScriptwindow.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)
首页.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>
表.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 中的表格在新窗口中打开（可能使用window.open()JavaScript 或其他内容） ？
如果有人能够引导我完成如何使用我提供的代码执行此操作的步骤，并具体向我展示在哪里调用函数和类似的东西，我将不胜感激。我是 Flask/HTML/JS 的新手，我只是想学习供个人使用，但我在阅读链接和文档时感到沮丧，这些链接和文档显示了如何在新选项卡中显示像 google.com 这样的 URL，这是不是我想要的。谢谢！
第 1 步：查看此链接，其中解释了如何将 Jquery 和 Ajax 与 FLASK 结合使用
这里的关键概念是 AJAX（异步 JavaScript 和 XML）。简而言之，它是一种架构，可以在后台向服务器发送请求（称为异步请求），然后根据从服务器接收到的结果修改网页浏览器当前显示的页面内容，避免并且服务器不会再次传输完整的页面。
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)
在我们攻击模板之后：
主页.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>
表.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',
我向此函数发送一个数据（用户在选择标签中选择的值），该数据存储在变量user_input中：
user_input: $('#input').val(),
在 Flask 一侧，我获取数据并将其存储在一个名为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');
“table”路由将先前存储在全局变量（user_input）中的数据存储在变量 x 中，然后调用函数get_table()（通过向他传递参数中的变量 x ），该函数返回字典列表，并且最后它返回页面table.html，参数中包含字典列表：
x = user_input
dict_table = get_table(x)
return render_template('table.html', dict_table=dict_table)
我希望这会对您有所帮助，尽管我确信还有许多其他方法可以做到这一点，也许更有效。
| 归档时间： |
|
| 查看次数： |
11675 次 |
| 最近记录： |