FastAPI中POST与GET传值异常：跳转页面无法携带输入数据

你的核心问题在于两个逻辑冲突：点击a标签时既触发POST请求又执行默认跳转，且/books路由调用get_books()时未传递参数，导致Body对象直接被调用casefold()方法引发报错。同时你前端POST请求传递的字段info与后端接收的prompt不匹配，这也是数据无法正确传递的隐藏问题。以下是几种可行的解决方案：

方案一：改用GET请求携带查询参数跳转（最直接） #

将输入数据作为URL查询参数传递，无需POST请求：

1. 后端代码调整 #

from fastapi import Query

@app.get('/get_books')
async def get_books(prompt: str = Query(...)):
    book_list = []
    for book in BOOKS:
        if (book.get('title').casefold() == prompt.casefold() 
            or book.get('author').casefold() == prompt.casefold() 
            or book.get('category').casefold() == prompt.casefold()):
            book_list.append(book)
    return book_list

@app.get('/books', response_class=HTMLResponse)
async def books(request: Request, prompt: str = Query(None)):
    book_list = []
    if prompt:
        book_list = await get_books(prompt)
    return templates.TemplateResponse("books.html", {"request": request, 'book_list': book_list})

2. 前端代码修改 #

阻止a标签默认跳转行为，手动构造带查询参数的URL后跳转：

<a id="btn" class="main__arrow" href="#"><i class="fa-solid fa-arrow-right"></i></a>

const el = document.getElementById('btn');

el.addEventListener('click', function(e){
    e.preventDefault();
    const info = document.getElementById("prompt").value;
    window.location.href = `/books?prompt=${encodeURIComponent(info)}`;
});

方案二：先POST获取数据，再跳转传递结果 #

若必须使用POST请求，可先获取查询结果，再通过URL参数传递给/books页面：

1. 后端代码调整 #

import json
from fastapi import Query

@app.post('/get_books')
async def get_books(prompt = Body()):
    book_list = []
    for book in BOOKS:
        if (book.get('title').casefold() == prompt.casefold() 
            or book.get('author').casefold() == prompt.casefold() 
            or book.get('category').casefold() == prompt.casefold()):
            book_list.append(book)
    return book_list

@app.get('/books', response_class=HTMLResponse)
async def books(request: Request, book_data: str = Query(None)):
    book_list = []
    if book_data:
        book_list = json.loads(book_data)
    return templates.TemplateResponse("books.html", {"request": request, 'book_list': book_list})

2. 前端代码修改 #

const el = document.getElementById('btn');

el.addEventListener('click', async function(e){
    e.preventDefault();
    const info = document.getElementById("prompt").value;
    const response = await fetch("/get_books", {
            method: "POST",
            headers: { "Accept": "application/json", "Content-Type": "application/json" },
            body: JSON.stringify({ prompt: info }) // 字段名与后端保持一致
        });
        if (response.ok) {
            const bookList = await response.json();
            const encodedData = encodeURIComponent(JSON.stringify(bookList));
            window.location.href = `/books?book_data=${encodedData}`;
        } else {
            console.log(response);
        }
});

方案三：用HTML表单提交跳转（无需JS） #

直接通过表单提交自动携带查询参数跳转：

<form action="/books" method="GET">
    <input type="text" id="prompt" name="prompt">
    <button type="submit" class="main__arrow"><i class="fa-solid fa-arrow-right"></i></button>
</form>

后端代码与方案一一致即可。

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