Flask中如何无刷新地将模板注入到另一模板中？

1. 后端编写单独渲染表单的视图 #

不用调用主页面视图，专门写视图函数渲染单个表单模板，返回纯HTML片段：

from flask import render_template, jsonify

@app.route('/forms/<form_name>')
def get_form(form_name):
    # 从数据库获取对应非营利组织数据（替换成你的实际查询逻辑）
    org_data = query_organization_data()
    
    # 根据表单名称返回对应渲染后的HTML
    if form_name == 'mission_form':
        return render_template('forms/mission_form.html', data=org_data)
    elif form_name == 'contact_form':
        return render_template('forms/contact_form.html', data=org_data)
    # 可扩展更多表单分支
    return jsonify({'error': 'Form not found'}), 404

2. 前端首次加载：AJAX注入表单到基础模板 #

页面加载完成后，异步请求表单HTML并插入指定容器：

document.addEventListener('DOMContentLoaded', function() {
    // 配置表单容器ID与对应后端路由
    const formConfigs = [
        { containerId: 'mission-form-box', route: '/forms/mission_form' },
        { containerId: 'contact-form-box', route: '/forms/contact_form' }
    ];

    formConfigs.forEach(config => {
        fetch(config.route)
            .then(res => res.text())
            .then(html => {
                document.getElementById(config.containerId).innerHTML = html;
            })
            .catch(err => console.error('表单加载失败:', err));
    });
});

在基础模板中预留表单容器（对应绝对定位样式）：

<!-- 基础模板中对应位置 -->
<div id="mission-form-box" style="position:absolute;"></div>
<div id="contact-form-box" style="position:absolute;"></div>

3. 提交数据后无刷新更新表单 #

在你已有的AJAX提交回调中，重新请求对应表单视图，替换容器内容：

// 以mission表单提交为例
document.getElementById('mission-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch('/submit_mission', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(result => {
        if (result.success) {
            // 提交成功后重新加载该表单
            fetch('/forms/mission_form')
                .then(res => res.text())
                .then(html => {
                    document.getElementById('mission-form-box').innerHTML = html;
                });
        }
    })
    .catch(err => console.error('提交失败:', err));
});

4. 优化：封装复用加载函数 #

把表单加载逻辑封装成函数，避免重复代码：

function reloadForm(containerId, route) {
    fetch(route)
        .then(res => res.text())
        .then(html => {
            document.getElementById(containerId).innerHTML = html;
        })
        .catch(err => console.error(`加载表单${route}失败:`, err));
}

// 页面初始化调用
document.addEventListener('DOMContentLoaded', function() {
    reloadForm('mission-form-box', '/forms/mission_form');
    reloadForm('contact-form-box', '/forms/contact_form');
});

// 提交成功时调用（示例）
// ...提交回调内：
reloadForm('mission-form-box', '/forms/mission_form');

如果需要更细粒度的内容更新（而非重渲染整个表单），可以让后端返回更新后的JSON数据，前端手动修改对应DOM节点，但重渲染表单模板的方式更简单直接，适配你的场景。

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