FastAPI 中实现 POST 提交后跳转并传递数据的正确方式-js教程-PHP中文网

FastAPI 中实现 POST 提交后跳转并传递数据的正确方式

本文讲解如何在 FastAPI 中通过前端 JavaScript 正确提交表单数据（POST），获取响应结果，并跳转到新页面（如 /books）同时携带数据，避免 AttributeError: 'Body' object has no attribute 'casefold' 等常见错误。

本文讲解如何在 fastapi 中通过前端 javascript 正确提交表单数据（post），获取响应结果，并跳转到新页面（如 `/books`）同时携带数据，避免 `attributeerror: 'body' object has no attribute 'casefold'` 等常见错误。

在 FastAPI 中，直接通过跳转无法携带 POST 数据——因为 GET 请求不包含请求体（body），而你的 /books 路由却试图调用 await get_books()，该函数依赖 Body() 参数解析 JSON 数据。此时 get_books() 被无参调用，FastAPI 将传入一个空 Body 对象（而非字符串），导致 .casefold() 调用失败。

✅ 正确做法是：分离关注点——先用 POST 获取数据，再跳转页面，并将结果暂存于客户端（如 sessionStorage），供目标页读取。

✅ 修正后的完整流程

1. 后端：优化 get_books 接口（接收 JSON 字段 info）

from fastapi import Body, Request, HTTPException
from fastapi.responses import JSONResponse

@app.post("/get_books")
async def get_books(info: str = Body(..., embed=True)):  # ✅ 显式声明 info 为字符串，且嵌套在 JSON body 中
    book_list = []
    for book in BOOKS:
        title = book.get("title", "").casefold()
        author = book.get("author", "").casefold()
        category = book.get("category", "").casefold()
        if info.casefold() in [title, author, category]:
            book_list.append(book)
    return {"books": book_list}  # ✅ 返回结构化 JSON，便于前端解析

⚠️ 注意：Body(..., embed=True) 表示期望请求体为 {"info": "xxx"}；若前端发送的是裸字符串（如 JSON.stringify(info)），则改用 Body(..., media_type="text/plain") 并配合 await request.body() 手动解析。

2. 前端：POST 后存储数据并跳转（关键修复）

<!-- 移除默认 href，防止意外 GET -->
<a id="btn" class="main__arrow" href="javascript:void(0)">
  <i class="fa-solid fa-arrow-right"></i>
</a>
<input type="text" id="prompt" placeholder="搜索书名/作者/分类">

const btn = document.getElementById('btn');
btn.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({ info: promptValue }) // ✅ 匹配后端 embed=True 结构
    });

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

    const data = await response.json();
    // ✅ 存入 sessionStorage（页面跳转后仍可用，关闭标签页即销毁）
    sessionStorage.setItem("searchResult", JSON.stringify(data.books));

    // ✅ 安全跳转
    window.location.href = "/books";
  } catch (err) {
    console.error("搜索失败:", err);
  }
});

3. 前端 /books 页面：读取并渲染数据

在 books.html 中添加初始化逻辑：

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const books = JSON.parse(sessionStorage.getItem("searchResult") || "[]");
    const container = document.getElementById("book-list");

    if (books.length === 0) {
      container.innerHTML = "<p>未找到匹配的图书。";
      return;
    }

    const html = books.map(book => `
      <div class="book">
        <h3>${book.title}
        <p>作者：${book.author}｜分类：${book.category}
      
    `).join("");
    container.innerHTML = html;

    // ✅ 清理 sessionStorage，避免重复使用
    sessionStorage.removeItem("searchResult");
  });
</script><div id="book-list"></div>

4. （可选）后端 /books 路由：精简逻辑

@app.get("/books", response_class=HTMLResponse)
async def books(request: Request):
    # ✅ 不再调用 get_books() —— 数据已由前端 POST 获取并缓存
    return templates.TemplateResponse("books.html", {"request": request})