我如何提交从HTML下拉列表中选择的value使用FastAPI在后端和HTML- jinja2模板在前端?
下面是目前为止我的应用程序代码:
from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates/")
@app.get('/')
def read_form():
return 'hello world'
@app.get("/form")
def form_post(request: Request):
result = "Select your name"
return templates.TemplateResponse('form.html', context={'request': request, 'result': result})
@app.post("/form")
def form_post(request: Request, result = Form(...)):
return templates.TemplateResponse('form.html', context={'request': request, 'result': result})
下面是HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Form</title>
</head>
<body>
<form method="post">
<select name="names" id="names">
<option value="n1">Name 1</option>
<option value="n2">Name 2</option>
<option value="n3">Name 3</option>
<option value="n5">Name 4</option>
</select>
<input type="submit" value="Submit">
</form>
<p>Result: {{ result }}</p>
</body>
</html>
错误信息如下:
{"detail":[{"loc":["body","result"],"msg":"field required","type":"value_error.missing"}]}
目标是选择一个name，然后点击submit，最后显示在下面。
您需要确保在提交HTML<form>时包含action属性-它指定将form-data发送到哪里(参见W3schools<form>标签文档中的示例)。另外，在用于创建下拉列表的<select>元素中，确保使用相同的name用于在端点中定义Form参数。根据W3schools<select>标签文档:
需要
name属性来引用表单数据表单被提交(如果省略name属性，则没有来自下拉列表将提交)。
<select>中的每个<option>元素都应该有一个value属性，其中包含从下拉列表中选择该选项时提交给服务器的数据值。如果没有包含value属性，则该值默认为元素中包含的文本。您可以在<option>元素上包含selected属性，使其在页面首次加载时默认被选中。
工作示例
app.py
from fastapi import FastAPI, Form, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory='templates')
@app.post('/submit')
def submit(car: str = Form(...)):
return car
@app.get('/', response_class=HTMLResponse)
def main(request: Request):
return templates.TemplateResponse('index.html', {'request': request})
模板/index . html
<!DOCTYPE html>
<html>
<body>
<form method="POST" action="/submit">
<label for="cars">Choose a car:</label>
<select name="car" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>