FastAPI表单提交POST接口无法正确获取输入框值问题
问题背景
我通过FastAPI结合Jinja2模板实现了一个包含输入框和提交按钮的简单HTML页面,页面效果如下:
页面对应表单代码:
<div class="row justify-content-center"> <form method="POST" action="/searchresultpage" class="form-inline" id="signup-form"> <div class="form-group input-group-lg"> <input type="text" name="origin" class="form-control input-lg" aria-describedby="emailHelp" placeholder="Origin"> </div> <button type="submit" class="btn btn-primary btn-lg">Search</button> </form> </div>
页面路由接口定义:
@app.get("/") @app.get("/search") def search(request: Request): return templates.TemplateResponse("search.html", {"request": request, "message": "Search"})
需求是把用户在输入框填写的文本传递给/searchresultpage接口,但测试时无论输入什么内容,接口接收到的变量值始终是固定字符串"origin",当前POST接口代码如下:
@app.post("/searchresultpage") def search_result_page(request: Request, text: str = Form("origin")): matched_movies = load_movies_from_db(text) matched_actors = load_actors_from_db(text) return templates.TemplateResponse("search_result_page.html", {"request": request, "text": text, "actors": matched_actors, "movies": matched_movies})
问题原因
Form()的第一个位置参数是字段默认值,不是要绑定的表单字段名。当前写法Form("origin")相当于给参数text硬编码了默认值"origin",自然无法获取用户实际输入的内容。
FastAPI解析表单参数时,默认用函数参数名匹配表单控件的name属性值,如果参数名和name属性不一致,需要通过alias参数显式指定要绑定的表单字段名。
修复方案
两种方案二选一即可:
- 方案1:将接口参数名改为和输入框
name属性一致的origin,标记字段为必填项
# 提前从fastapi导入Form依赖 @app.post("/searchresultpage") def search_result_page(request: Request, origin: str = Form(...)): matched_movies = load_movies_from_db(origin) matched_actors = load_actors_from_db(origin) return templates.TemplateResponse("search_result_page.html", { "request": request, "text": origin, "actors": matched_actors, "movies": matched_movies })
- 方案2:保留参数名
text,通过alias参数绑定名为origin的表单字段
@app.post("/searchresultpage") def search_result_page(request: Request, text: str = Form(..., alias="origin")): matched_movies = load_movies_from_db(text) matched_actors = load_actors_from_db(text) return templates.TemplateResponse("search_result_page.html", { "request": request, "text": text, "actors": matched_actors, "movies": matched_movies })
代码里
Form(...)的三个点是Ellipsis标记,代表这个表单字段是必填项,如果用户提交时没填内容会直接返回参数缺失的错误。
内容的提问来源于stack exchange,提问作者PetrSevcik
相关产品推荐
相关产品推荐

