javascript - Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML-6ren

javascript - Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML

转载作者：行者123 更新时间：2023-11-27 22:57:24

我有一个 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，这不是我想要的。谢谢!

最佳答案

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

这里的关键概念是 AJAX(异步 JavaScript 和 XML)。简而言之，它是一种架构，可以在后台向服务器发送请求(称为异步请求)，然后根据从服务器收到的结果修改 Web 浏览器当前显示的页面内容，避免 as以及服务器不再传输完整页面。

第 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 方法，允许我在新选项卡 ( more details here ) 中打开一个 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)
```

我希望这会对你有所帮助，尽管我相信还有很多其他方法可以做到这一点，也许更有效。

关于javascript - Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54799041/

文章推荐： html - 选中单选按钮时如何设置粗体标签

文章推荐： python - Django SelectDateWidget 无法正确呈现

flask - Flask-Potion + Flask-Principal锁定用户资源
我正在遵循Flask-potion教程并尝试保护我的api。我一直试图找出如何在User端点上设置权限，以使一个User无法查看另一个User的记录。这是我的代码： class UserResourc
flask - 如何使用 pytest-flask 将发布数据发送到 flask
项目设置 Python 3.5.3 flask 0.12.2 目录 . ├── Core │ ├── BackgroundProcessManager.py │ ├── FirebaseDat
flask - 使用带有 flask 脚本和应用程序工厂的 flask 迁移
我正在构建 flask 应用程序并决定这次尝试应用程序工厂方法，但是遇到了 flask 迁移的麻烦并且无法找出简单的解决方案。请注意，我想将配置位置作为选项传递给脚本管理.py: manager
flask - 如何在现有 Flask 应用中使用 Flask-APScheduler
我尝试通过以下示例代码来熟悉Flask-APScheduler插件:https://github.com/viniciuschiele/flask-apscheduler/blob/master/ex
flask-jwt - flask jwt和 flask jwt扩展之间有区别吗？
我一周前刚刚了解了 Flask 和 JWT，所以我真的需要一些帮助。有人可以解释一下flask-jwt和flask-jwt-extended之间的区别吗？最佳答案 Flask-JWT 没有那么多功能
flask - flask 中不同类型的用户注册
我是 Flask 的新手，我只是想用它创建一个简单的市场。我的网站上有三种类型的用户 [卖家、买家、管理员]。我认为每种类型的用户都应该有自己的注册和登录，因为他们的角色应该提供不同类型的信息。另一方
flask - Flask:从数据库内容动态填充表单
基本上，我想做一些非常简单的事情：我想创建一个用于删除数据库中条目的表单。模板正在创建一个包含所有条目的html表，没有任何麻烦。我现在的问题是：如何将其转换为每行都有链接的表单。当然，我可以通过
flask - Flask-如何将查询字符串参数转换为路由参数
我对Flask来说非常陌生，其中一个基本要求是我需要SEO友好的URL。我说一条路线 @app.route('/sales/') @app.route(/sales/) def get_sales(
flask - [Flask]-自定义Flask用户登录
一直在为用户管理系统开发Flask-user，但是我看不到自定义登录页面和注册页面的方法。我使用pip安装了flask-user pip install flask-user 任何帮助，将不胜感激最
flask - flask 蓝图不起作用
我有一个奇怪的情况，不知道如何找到问题。我已经创建了一个这样的蓝图 reportjobsmod = Blueprint('jobreports', __name__, url_prefix='/jo
flask - Flask 应用程序中的内存数据
我认为在 Flask 中拥有实例变量的正确方法是添加用户和 session ，但我正在尝试测试一个概念，我还不想经历所有这些。我试图让一个网络应用程序将图像加载到一个变量中，然后可以对其执行不同的图像
flask - flask wtf中如何从SelectField获取选中的数据
select = SelectField("City") form.select.choices = [(places['name'], places['name']) for places in p
flask - 如何登录 flask
这个问题在这里已经有了答案: Provide extra information to Flask's app.logger (2 个回答) 3年前关闭。我正在运行一个 flask 应用程序。我想写
flask - flask 问题和错误的请求
我当时正在编程一个非常不错的api，使用json从游戏服务器到我的网站空间获取一些json数据，但是每次我使用angular发送请求时，我都会得到以下信息:127.0.0.1--[20 / Mar
flask - flask 自定义错误处理的上传功能
我已经开发了一个上传表单，以将特定的.xlsx文件作为上传。要求是要处理非xlsx上载的任何异常(例如zip，exe文件)。我正在使用pyexcel库读取上传内容。我尝试创建以下代码来处理此异常: e
flask - flask 404捕获要求的网址
我使用此功能在网站上捕获404错误: @app.errorhandler(404) def page_not_found(e): logger.warning('User raised an
flask-restful - Flask Restful 和 Flask SocketIO 服务器一起运行
我正在尝试同时使用 Flask Restful 和 Flask SocketIO。我已经制作了一个 Flask Restful 应用程序，但现在我想使用 Flask SocketIO 在客户端和我的服
flask - 在代码或 `flask run` 命令中指定 Flask 重新加载监视列表(extra_files)
我有一些 Flask 应用程序，我通过设置 FLASK_APP 来运行它们。环境变量和调用 flask run .自 FLASK_DEBUG也设置了，每当我更改一些代码时，应用程序都可以方便地重新加载
python - Flask - 不能使用来自其他文件的 Flask 和 Flask-mail 实例
我目前正在使用 Flask 构建一个应用程序。我正在努力访问 Flask 实例“app”以及 Flask-mail 实例“mail”。下面是我的项目的样子: └── my-project ├
flask - Flask-Login 的 `remember_me` 是否覆盖 Flask 的 `permanent` ？
Remember-me是 parameter flask_login.login_user(user, remember=False, duration=None, force=False, fres

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML