Flask中执行Python函数后自动运行JS加载HTML到iframe的实现方法

核心逻辑是通过异步请求（AJAX）提交参数，后端处理完成返回成功信号后，直接触发创建iframe加载表格的逻辑，无需二次点击。

1. 前端代码修改 #

把原来的两个按钮合并为一个，取消表单默认提交行为，用AJAX传递参数：

<br />
<!-- 合并后的单个按钮，绑定点击事件 -->
<input type='button' value='提交查询' class="savebtn" name='Submit' onclick="handleSubmit()" />

...

<!-- 如果项目已有jQuery可省略这行 -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>
function handleSubmit() {
    // 1. 收集页面文本框的参数，替换为你实际的文本框ID
    const queryParam = $('#input_text_id').val();
    
    // 2. 异步提交参数到后端接口
    $.post('/generate_table', {query_param: queryParam}, function(res) {
        // 3. 后端返回成功后，创建iframe加载生成的表格
        $('iframe').remove(); // 先清除旧的iframe
        const iframe = document.createElement('iframe');
        // 加时间戳防止加载缓存的旧表格文件
        iframe.src = '/static/Table.html?t=' + new Date().getTime();
        iframe.height = "500";
        iframe.width = "100%";
        document.body.appendChild(iframe);
    })
}
</script>

2. Flask后端代码修改 #

原来的生成逻辑接口调整为接受POST请求，处理完成后返回JSON响应：

from flask import Flask, request, jsonify, render_template
import os

# 配置静态资源目录，生成的Table.html存在该目录下可直接访问
app = Flask(__name__, static_folder='static')

@app.route('/generate_table', methods=['POST'])
def generate_table():
    # 获取前端传递的查询参数
    query_param = request.form.get('query_param')
    # 此处替换为你实际的数据库查询逻辑
    query_result = your_db_query_func(query_param)
    
    # 渲染带表格的HTML模板，写入到静态目录下
    table_html = render_template('table_template.html', data=query_result)
    with open(os.path.join('static', 'Table.html'), 'w', encoding='utf-8') as f:
        f.write(table_html)
    
    # 返回成功响应给前端
    return jsonify(code=200, msg="生成成功")

注意事项 #

• 若多个用户同时使用该功能，建议给每个生成的HTML文件加唯一标识（比如用户ID+时间戳命名），避免不同用户的查询结果互相覆盖
• 如果查询生成耗时较长，可以在触发AJAX请求前加个"正在生成..."的加载提示，请求返回后再隐藏，提升使用体验
• 生成的HTML文件需存储在Flask配置的静态资源路径下，否则iframe会出现加载失败的问题

内容的提问来源于stack exchange，提问作者coderKeed