Flask结合Ajax Post后无法通过render_template跳转页面问题

Ajax是异步HTTP请求，它会在后台接收后端返回的内容，但不会自动触发浏览器页面跳转。你调用render_template后，后端确实返回了目标页面的HTML，但这些内容仅被Ajax的回调函数接收，并未渲染到浏览器窗口中，因此页面无变化；点击返回键时，浏览器历史记录触发了对应页面的加载，才会显示目标内容。

根据需求场景，有三种常见处理方案：

方案一：后端返回跳转指令，前端主动触发跳转 #

后端不直接返回模板，而是返回包含目标URL的JSON数据，由前端JavaScript执行页面跳转：

• Flask后端代码：

from flask import jsonify, url_for, request, render_template

@app.route('/submit-result', methods=['POST'])
def handle_result():
    result = request.form.get('result')  # 接收前端发送的result数据
    # 执行你的业务逻辑处理...
    # 返回跳转目标页面的URL
    return jsonify({'redirect_url': url_for('target_page')})

@app.route('/target')
def target_page():
    # 这里可以传递需要的参数到模板
    return render_template('target.html')

• 前端Ajax代码：

$.ajax({
    url: '/submit-result',
    type: 'POST',
    data: {result: '你的字符串数据'},
    success: function(response) {
        // 前端主动跳转到目标页面
        window.location.href = response.redirect_url;
    }
});

方案二：直接使用表单提交（无需Ajax） #

如果仅需提交数据并跳转页面，不需要保留当前页面状态，可直接用HTML表单提交替代Ajax：

• 前端表单代码：

<form action="/submit-result" method="POST">
    <input type="hidden" name="result" value="你的字符串数据">
    <button type="submit">提交并跳转</button>
</form>

• Flask后端代码：

@app.route('/submit-result', methods=['POST'])
def handle_result():
    result = request.form.get('result')
    # 执行业务逻辑...
    # 直接返回目标模板，浏览器会自动跳转
    return render_template('target.html', result=result)

方案三：Ajax接收模板内容，手动替换当前页面 #

若需保留Ajax异步特性，同时展示后端返回的模板内容，可在回调中替换当前页面的HTML内容：

• Flask后端代码：

@app.route('/submit-result', methods=['POST'])
def handle_result():
    result = request.form.get('result')
    # 执行业务逻辑...
    return render_template('target.html', result=result)

• 前端Ajax代码：

$.ajax({
    url: '/submit-result',
    type: 'POST',
    data: {result: '你的字符串数据'},
    success: function(htmlContent) {
        // 替换当前页面的body内容
        document.body.innerHTML = htmlContent;
        // 可选：更新浏览器历史记录，让返回键逻辑正常
        history.pushState({}, '', '/target');
    }
});

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