Python Flask结合前端Fetch实现表单无刷新提交与局部刷新

Fete 工作原理与基础环境

fetch() 是浏览器内置基于 Promise 的网络请求接口，用于替代传统的 XMLHttpRequest。调用时传入目标 URL 与配置对象，立即返回一个承诺对象。开发者需在 .then() 中链式处理响应数据，并通过 catch() 捕获网络或解析异常。该机制将 UI 渲染与后端数据逻辑解耦，使页面交互保持连续。

开发前需安装基础依赖并启用跨域支持：

pip install flask flask-cors

实操步骤与示例

第1步：初始化 Flask 跨域服务

目的：提供接收 JSON 数据、验证参数并返回结构化响应的 RESTful 接口。使用 flask-cors 可自动处理跨域预检请求，降低前端调试门槛。

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/login', methods=['POST'])
def login():
    data = request.get_json()
    if data.get('username') == 'admin' and data.get('password') == 'secret':
        return jsonify({'success': True, 'redirect_url': '/dashboard'}), 200
    return jsonify({'success': False, 'message': '凭证错误'}), 401

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

第2步：拦截表单提交与异步发请求

目的：阻断表单默认的同步跳转行为，将表单数据转换为 JSON 发送至指定 API，并根据后端返回结果执行界面逻辑。

const loginForm = document.getElementById('loginForm');
loginForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止页面刷新
    const formData = new FormData(this);
    const jsonData = Object.fromEntries(formData.entries());

    fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(jsonData)
    })
    .then(response => {
        // 关键步骤：先校验 HTTP 状态码范围(2xx表示成功)
        if (!response.ok) throw new Error(`请求失败: ${response.status}`);
        return response.json();
    })
    .then(result => {
        if (result.success) {
            window.location.href = result.redirect_url || '/';
        } else {
            document.getElementById('error-msg').textContent = result.message;
        }
    })
    .catch(err => console.error('网络异常:', err));
});

第3步：处理响应数据与 DOM 局部刷新

目的：在新增或修改数据成功后，不刷新整页，仅针对变更节点进行 DOM 插入或替换。后端需配合返回完整实体对象以便前端复用。

document.getElementById('saveBtn').addEventListener('click', () => {
    const newItem = { id: Date.now(), title: '新任务', status: 'pending' };

    fetch('/api/items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newItem)
    })
    .then(res => res.ok ? res.json() : Promise.reject(new Error('保存失败')))
    .then(savedItem => {
        const listEl = document.getElementById('itemList');
        const li = document.createElement('li');
        li.innerHTML = `${savedItem.title} - ${savedItem.status}`;
        listEl.appendChild(li);
    });
});

常见响应类型与排错策略

后端返回值除 JSON 外，也可能包含纯文本或 HTML 片段。处理文本时使用 response.text()，处理二进制流使用 response.blob()。无论类型如何，务必在解析前通过 response.ok 过滤服务端报错（如 400、500）。若直接对 HTML 错误页面调用 response.json()，将抛出 SyntaxError 导致后续链中断。此时可结合 try-catch 或 catch 分支统一展示用户友好提示。

总结

通过 fetch() 配合 Flask 的路由控制，可实现高内聚低耦合的异步表单提交与局部刷新逻辑。掌握 Promise 链式调用、response.ok 状态预判以及 DOM 动态挂载，即可构建体验接近原生应用的现代 Web 交互。以上就是利用 Fetch 与 Flask 实现表单无刷新提交与数据更新的详细内容，更多关于 JavaScript 异步请求与后端接口对接的资料请关注本站其它相关文章！