Flask表单无刷新提交后页面无法显示提交值求助

你的核心问题在于AJAX提交后后端用了重定向，但前端没有处理页面更新：虽然终端能打印值，但AJAX请求不会触发页面跳转，当前页面的模板变量passed_value始终是初始加载时的None，自然无法更新显示。以下是具体修复方案：

1. 修改后端upload视图函数，返回JSON而非重定向 #

AJAX请求不需要页面跳转，直接返回包含提交值的JSON数据即可：

from flask import jsonify  # 先导入jsonify模块

@auth.route('/upload', methods=['POST'])
def upload():
    form_value = request.form.get('data')
    if form_value:
        print(form_value)
        # 返回JSON格式的提交值
        return jsonify({'form_value': form_value})
    # 处理空提交的情况
    return jsonify({'form_value': ''})

2. 调整前端JavaScript，处理响应并更新页面元素 #

原来的代码仅打印了响应数据，需要添加逻辑把返回的值插入到页面的<h5>标签中：

<script type="text/javascript">
(uri => {
    const form = document.querySelector('form[name="my-form2"]');
    form.addEventListener('submit', evt => {
        evt.preventDefault();
        fetch(uri, {
            method: 'post',
            body: new FormData(evt.target)
        })
        .then(resp => resp.json())
        .then(data => {
            console.log(data);
            // 找到页面上的h5元素并更新内容
            const resultElement = document.querySelector('h5');
            resultElement.textContent = `The submitted value is: ${data.form_value}`;
        });
        evt.target.reset();
    });
})({{ url_for('auth.upload')| tojson }});
</script>

3. 优化模板初始显示（可选） #

第一次加载页面时passed_value为None，可以在模板中添加判断避免显示None：

<h5> The submitted value is: {{ passed_value if passed_value else '' }} </h5>

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