FastAPI 中实现 POST 数据传递与页面跳转的正确方法-html教程-PHP中文网

本文讲解如何在 FastAPI 中安全、可靠地将用户通过表单输入的数据（如搜索关键词）经 POST 提交后，再跳转至 GET 页面（如 /books）并展示结果，避免直接调用未传参的异步函数导致的 AttributeError。

本文讲解如何在 fastapi 中安全、可靠地将用户通过表单输入的数据（如搜索关键词）经 post 提交后，再跳转至 get 页面（如 `/books`）并展示结果，避免直接调用未传参的异步函数导致的 `attributeerror`。

在 FastAPI 中，@app.post 和 @app.get 是两个独立的请求生命周期——POST 请求负责接收并处理数据，GET 请求则用于渲染页面或返回资源。你当前代码中在 /books 的 GET 路由里直接调用 await get_books()，但该函数定义为接收 prompt = Body() 参数，而 GET 请求没有请求体（Body），因此 FastAPI 尝试解析空 Body 时抛出 AttributeError: 'Body' object has no attribute 'casefold'（本质是 prompt 为 None 或无效对象，却调用了 .casefold()）。

✅ 正确思路不是“让 GET 调用 POST 函数”，而是分离职责：

POST 接口（/get_books）专注校验、查询、返回 JSON 结果；
前端在成功获取结果后，将数据暂存至浏览器内存，再跳转；
GET 页面（/books）从内存读取并渲染（或结合查询参数重查）。

✅ 推荐方案：使用 sessionStorage 暂存 + 前端跳转

sessionStorage 生命周期与当前标签页绑定，安全、轻量、无需服务端状态管理，完美匹配单次搜索跳转场景。

1. 修正前端逻辑（关键修改）

<!-- 移除 href 默认跳转，改用 JavaScript 控制 -->
<a id="btn" role="button" class="main__arrow" href="javascript:void(0)">
  <i class="fa-solid fa-arrow-right"></i>
</a>

const el = document.getElementById('btn');
el.addEventListener('click', async function () {
  const promptValue = document.getElementById("prompt").value.trim();
  if (!promptValue) return;

  try {
    const response = await fetch("/get_books", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt: promptValue })  // 注意键名需与后端参数一致
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const bookList = await response.json();
    // ✅ 存入 sessionStorage（字符串化）
    sessionStorage.setItem('searchResult', JSON.stringify(bookList));
    sessionStorage.setItem('searchPrompt', promptValue);

    // ✅ 立即跳转（不带参数，干净 URL）
    window.location.href = '/books';
  } catch (err) {
    console.error("搜索失败:", err);
  }
});

2. 优化 FastAPI 后端接口

from fastapi import APIRouter, Body, Request
from fastapi.responses import HTMLResponse

@app.post('/get_books')
async def get_books(prompt: str = Body(..., embed=True)):  # ✅ 显式声明 prompt 为必需字符串
    print(f"Received prompt: '{prompt}'")
    book_list = []
    for book in BOOKS:
        title = book.get('title', '').casefold()
        author = book.get('author', '').casefold()
        category = book.get('category', '').casefold()
        if prompt.casefold() in (title, author, category):
            book_list.append(book)
    return book_list  # ✅ 直接返回列表，FastAPI 自动序列化为 JSON

⚠️ 注意：Body(..., embed=True) 表示期望 JSON 形如 {"prompt": "xxx"}；若前端发送 {info: "xxx"}，则需改为 info: str = Body(..., alias="info")。

3. 更新 /books GET 路由：读取 sessionStorage 并渲染

由于 sessionStorage 仅存在于浏览器端，服务端无法直接访问。因此 /books 页面应由前端自主渲染结果，而非依赖后端传入数据：

@app.get('/books', response_class=HTMLResponse)
async def books(request: Request):
    # ✅ 不再调用 get_books()！仅返回空白模板
    return templates.TemplateResponse("books.html", {"request": request})

并在 books.html 中添加初始化脚本：

<!-- books.html -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const resultStr = sessionStorage.getItem('searchResult');
    const prompt = sessionStorage.getItem('searchPrompt');

    if (resultStr) {
      const bookList = JSON.parse(resultStr);
      const container = document.getElementById('book-list');
      container.innerHTML = bookList.map(book => `
        <div class="book">
          <h3>${escapeHtml(book.title)}
          <p>作者: ${escapeHtml(book.author)} | 分类: ${escapeHtml(book.category)}
        
      `).join('');

      // ✅ 可选：清空 sessionStorage 避免重复使用
      sessionStorage.removeItem('searchResult');
      sessionStorage.removeItem('searchPrompt');
    } else {
      document.getElementById('book-list').innerHTML = '<p>未找到搜索结果，请返回重试。';
    }
  });

  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
</script><div id="book-list"></div>

? 替代方案对比（供进阶参考）

方案	是否推荐	说明
✅ sessionStorage（本文方案）	★★★★★	无服务端状态、低耦合、适合单页跳转场景
查询参数（/books?prompt=xxx）	★★★☆☆	简单但暴露敏感信息、URL 过长、需后端重查（非缓存结果）
Cookie（带签名）	★★☆☆☆	需服务端签名验证，增加复杂度，不适用于临时数据
后端 Session（如 fastapi-session）	★★☆☆☆	过重，违背无状态 REST 原则，增加部署负担