如何通过Flask响应JavaScript的POST请求渲染HTML模板？

你遇到的核心问题是：AJAX请求的响应不会自动让浏览器渲染新页面。AJAX设计的初衷就是在不刷新整个页面的情况下异步获取数据，所以Flask返回的HTML模板内容会被JS接收到，但浏览器不会自动替换当前页面内容。

下面是两种针对性的解决方案：

方案一：局部更新页面内容（保留AJAX） #

在AJAX的成功回调函数中，手动将Flask返回的HTML插入到页面的指定容器中。

jQuery版本示例 #

$.ajax({
    url: '/available_data',
    type: 'POST',
    headers: {
        'X-CSRFToken': csrf_token
    },
    data: JSON.stringify(data),
    contentType: 'application/json',
    success: function(response) {
        // 将返回的HTML替换页面中id为"target-container"的元素内容
        $('#target-container').html(response);
    },
    error: function(xhr, status, error) {
        console.log(xhr)
        console.log(status)
        console.log(error)
    }
});

原生JavaScript版本示例 #

var xhr = new XMLHttpRequest();
xhr.open("POST", "/available_data");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader('X-CSRFToken', csrf_token);
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 将返回的HTML插入到指定容器
        document.getElementById('target-container').innerHTML = xhr.responseText;
    } else {
        console.error('请求失败:', xhr.statusText);
    }
};
xhr.send(JSON.stringify(data));

Flask端代码（无需修改） #

if request.is_json:
    # 可在此处处理传入的JSON数据
    return render_template('my_template.html')

方案二：完全跳转新页面（放弃AJAX） #

如果你的需求是跳转到Flask渲染的新页面，不需要局部更新，那么直接用表单提交或者页面重定向即可，无需使用AJAX。

表单提交示例 #

HTML部分

<form id="data-submit-form" action="/available_data" method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" id="json-data" name="json_data">
    <button type="submit">提交数据</button>
</form>

JavaScript部分（准备并提交数据）

// 构造要提交的数据
var data = { /* 你的业务数据 */ };
// 将JSON数据存入隐藏字段
document.getElementById('json-data').value = JSON.stringify(data);
// 提交表单
document.getElementById('data-submit-form').submit();

Flask端调整代码（接收表单中的JSON数据）

import json
from flask import request, render_template

@app.route('/available_data', methods=['POST'])
def available_data():
    json_data_str = request.form.get('json_data')
    if json_data_str:
        data = json.loads(json_data_str)
        # 处理数据逻辑
        return render_template('my_template.html')

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