如何实现Flask表单提交时不重新渲染页面并获取表单数据

嘿，这个问题我碰到好多次了——想要避免表单提交时页面刷新跳顶部，核心就是用**异步请求（AJAX）**来处理，不用让浏览器重新加载整个页面。下面给你完整的实现步骤，直接就能用：

第一步：调整Flask后端代码 #

我们需要把原来返回页面的逻辑改成返回JSON响应，这样前端能拿到处理结果而不是新页面：

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

@app.route("/", methods = ["POST", "GET"])
def main_page():
    if request.method == "POST":
        # 提取表单数据，这里根据你的实际字段调整
        username = request.form.get("username")
        email = request.form.get("email")
        
        # 这里写你的业务逻辑，比如数据验证、存入数据库等
        # 示例：简单返回成功消息
        response_data = {
            "status": "success",
            "message": f"收到你的信息啦，{username}！"
        }
        
        # 返回JSON格式的响应，前端能直接解析
        return jsonify(response_data)
    # GET请求时正常渲染页面
    return render_template("main.html")

if __name__ == "__main__":
    app.debug = True
    app.run()

第二步：修改前端页面（main.html） #

给表单加个标识，然后用JavaScript的fetch API监听提交事件，阻止默认的刷新行为，异步发送数据：

<!DOCTYPE html>
<html>
<head>
    <title>异步表单提交</title>
</head>
<body>
    <!-- 给表单加ID，方便JS选择 -->
    <form id="userForm">
        <div>
            <label>用户名：</label>
            <input type="text" name="username" required>
        </div>
        <div>
            <label>邮箱：</label>
            <input type="email" name="email" required>
        </div>
        <button type="submit">提交</button>
    </form>

    <!-- 用来显示服务器返回的提示，不用刷新页面就能看到 -->
    <div id="feedback" style="margin-top: 15px;"></div>

    <script>
        const form = document.getElementById('userForm');
        const feedbackDiv = document.getElementById('feedback');

        form.addEventListener('submit', async (event) => {
            // 阻止浏览器默认的表单提交行为（关键！避免页面刷新）
            event.preventDefault();

            // 收集表单里的所有数据
            const formData = new FormData(form);

            try {
                // 异步发送POST请求到后端
                const response = await fetch('/', {
                    method: 'POST',
                    body: formData
                });

                // 解析后端返回的JSON数据
                const result = await response.json();

                // 在页面上显示结果，位置可以自己定
                feedbackDiv.textContent = result.message;
                feedbackDiv.style.color = '#2ecc71';

                // 可选：提交成功后重置表单
                form.reset();
            } catch (err) {
                // 处理请求失败的情况
                feedbackDiv.textContent = '提交失败，请稍后重试';
                feedbackDiv.style.color = '#e74c3c';
                console.error('请求出错：', err);
            }
        });
    </script>
</body>
</html>

额外说明 #

• 如果你习惯用jQuery，也可以用$.ajax来实现，逻辑完全一致：阻止默认提交→发送异步请求→处理响应。
• 后端一定要用jsonify返回数据，它会自动设置正确的响应头，确保前端能正确解析JSON。
• 这样处理后，用户提交表单时页面完全不会刷新，也不会跳回顶部，结果直接显示在页面指定位置，体验好很多。

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