PythonFlask结合前端Fetch搞定表单提交和页面刷新

目录

• 1. 初识Fetch：现代Web的通信信使
• 2. 实战准备：Flask后端的简单配置
• 3. 场景一：登录表单提交与页面重定向
• 4. 场景二：动态新增与修改数据
• 5. 场景三：处理不同类型的响应数据
• 6. 完整代码参考与总结

亮点包括：Fetch 核心原理剖析、登录重定向的异步处理、利用响应状态码动态更新UI、以及如何处理JSON/文本等不同格式的返回数据。

你将学到：

• Fetch API 的“承诺”机制与基础用法
• 如何用 Flask 构建 RESTful 风格的 API 端点
• 登录表单提交：告别传统表单刷新，实现平滑跳转
• 数据操作：前端一个请求，后端处理，前端UI即时响应
• 根据后端返回的不同数据类型（JSON/Text）进行精准处理

fetch() 是浏览器提供的、基于 Promise 的现代网络请求API。它取代了古老的 XMLHttpRequest，让异步数据请求变得清晰、简洁。你可以把它想象成一个专业的“信使”。

它的基本工作流程是：你给信使（fetch）一个地址（URL）和指示（配置对象），它立刻返回一个“承诺收据”（Promise）。这个承诺最终会兑现为“响应包裹”（Response对象），你需要打开这个包裹（调用如.json(), .text()等方法）才能拿到里面的真实数据。

// 一个最简单的GET请求示例
fetch('/api/data')
  .then(response => response.json()) // 打开包裹，解析JSON数据
  .then(data => console.log(data))   // 处理真实数据
  .catch(error => console.error('出错啦：', error)); // 处理错误

为了让前端Fetch能顺利与后端“对话”，我们需要一个能处理JSON、并能进行跨域资源共享（CORS）的Flask应用。首先，安装必要库：

pip install flask flask-cors

接着，搭建一个基础的后端服务：

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

app = Flask(__name__)
CORS(app)  # 允许前端跨域请求，开发时非常方便

# 我们将在后续场景中逐步填充这个app的路由
if __name__ == '__main__':
    app.run(debug=True)

传统表单提交会刷新页面，体验割裂。使用Fetch，我们可以实现无刷新登录，并根据后端指令进行前端路由跳转。

前端 (JavaScript)：拦截表单提交事件，使用Fetch发送数据。

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    const formData = new FormData(this);
    // 或者将数据转换为JSON: JSON.stringify(Object.fromEntries(formData))

    fetch('/api/login', {
        method: 'POST',
        body: formData, // 发送FormData对象
        // headers: { 'Content-Type': 'application/json' }, // 如果发送JSON需设置此header
    })
    .then(response => response.json()) // 解析后端返回的JSON
    .then(result => {
        if (result.success) {
            // 登录成功，使用前端路由跳转，而非后端重定向
            window.location.href = result.redirect_url || '/dashboard';
        } else {
            // 登录失败，动态更新页面上的错误提示元素
            document.getElementById('error-msg').textContent = result.message;
        }
    })
    .catch(error => console.error('Error:', error));
});

后端 (Flask)：验证数据，返回包含状态和指令的JSON，而不是直接返回重定向的HTML。

@app.route('/api/login', methods=['POST'])
def login():
    username = request.form.get('username')
    password = request.form.get('password')

    # 这里应是你的验证逻辑，例如查询数据库
    if username == 'admin' and password == 'secret':
        # 返回成功状态和前端跳转地址
        return jsonify({'success': True, 'redirect_url': '/dashboard'})
    else:
        # 返回失败状态和错误信息
        return jsonify({'success': False, 'message': '用户名或密码错误'}), 401

在管理系统中，新增或修改一条数据后，我们希望列表能立即更新，而无需刷新整个页面。

核心思路：Fetch请求成功后，在.then()中根据后端返回的最新数据，直接操作DOM更新UI。

// 假设有一个保存按钮，用于提交新增或修改的数据
saveButton.addEventListener('click', () => {
    const itemData = { title: '新项目', status: 'active' };

    fetch('/api/items', {
        method: 'POST', // 新增用POST，修改可能是PUT或PATCH
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(itemData)
    })
    .then(response => response.json())
    .then(newItem => {
        // 关键步骤：请求成功后，动态更新前端列表
        const itemList = document.getElementById('itemList');
        const newItemElement = document.createElement('li');
        newItemElement.id = `item-${newItem.id}`;
        newItemElement.innerHTML = `${newItem.title} ${newItem.status}`;
        itemList.appendChild(newItemElement);

        // 或者，如果是修改操作，可以找到对应的DOM元素更新其内容
        // const oldItemElement = document.getElementById(`item-${newItem.id}`);
        // oldItemElement.innerHTML = ...;

        alert('操作成功！'); // 或更优雅的提示
    });
});

对应的Flask后端需要返回创建或更新后的完整数据对象，以便前端使用。

后端可能返回JSON，也可能返回纯文本或HTML片段。Fetch的Response对象提供了不同的方法来处理。

处理JSON (最常用)：如上文所示，使用response.json()。

处理文本：例如后端返回一个简单的成功消息或CSV数据。

fetch('/api/export')
  .then(response => response.text())
  .then(textData => {
    console.log(textData);
    // 处理文本数据...
  });

检查响应状态：在解析数据前，先检查请求是否真正成功是个好习惯。

fetch('/api/some-data')
  .then(response => {
    if (!response.ok) { // 检查HTTP状态码是否在200-299之间
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 状态正常才解析JSON
  })
  .then(data => /* 处理数据 */)
  .catch(error => /* 处理网络错误或状态码错误 */);

下面是一个整合了登录和新增项目的超简易完整示例：

# app.py (Flask后端)
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
items = [] # 用一个简易列表模拟数据库

@app.route('/api/login', methods=['POST'])
def login():
    data = request.get_json()
    if data.get('user') == 'demo':
        return jsonify({'success': True, 'token': 'fake-jwt-token'})
    return jsonify({'success': False}), 401

@app.route('/api/items', methods=['GET', 'POST'])
def handle_items():
    if request.method == 'GET':
        return jsonify(items)
    else: # POST
        new_item = request.get_json()
        new_item['id'] = len(items) + 1
        items.append(new_item)
        return jsonify(new_item), 201

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

<!-- index.html (部分前端) -->
<script>
// 登录
fetch('/api/login', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({user: 'demo', pass: 'demo'})
}).then(r => r.json()).then(console.log);

// 新增项目并更新列表
fetch('/api/items', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({name: 'New Task'})
})
.then(r => r.json())
.then(newItem => {
    const list = document.getElementById('list');
    list.innerHTML += `<li>${newItem.id}: ${newItem.name}</li>`;
});
</script>

总结一下：Fetch + Flask 的组合，通过“请求-响应-JSON”的模式，将前后端解耦，让Web交互变得更加动态和高效。

关键在于：前端负责交互和UI更新，后端负责数据和逻辑，两者通过清晰的API契约进行通信。

到此这篇关于Python Flask结合前端Fetch搞定表单提交和页面刷新的文章就介绍到这了,更多相关Python Flask Fetch表单提交内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！

您可能感兴趣的文章:

• 使用Python和Selenium实现表单的自动填充与提交功能
• Python+Selenium实现表单自动填充和提交
• python实现的登录与提交表单数据功能示例
• Python实现网站表单提交和模板
• Python使用requests提交HTTP表单的方法
• Python 自动化表单提交实例代码