如何使用FastAPI提交HTML下拉列表？

uurity8g 于 2022-12-21 发布在其他

关注(0)|答案(1)|浏览(201)

如何使用FastAPI和HTML模板提交从下拉列表中选择的value？
以下是我目前为止编写的应用程序代码：

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

来源：https://stackoverflow.com/questions/74504161/how-to-submit-an-html-dropdown-list-using-fastapi

1条答案

按热度按时间

laik7k3q1#

您需要确保在表单中包含action属性，该属性指定在提交表单时将form-data发送到何处（也请参见W3schools <form> tag docs）。此外，在用于创建下拉列表的<select>元素中，请确保使用相同的name来定义端点中的Form参数。根据W3schools <select> tag docs：
表单提交后需要name属性来引用表单数据（如果省略name属性，则不会提交下拉列表中的数据）。
<select>中的每个<option>元素都应具有一个value属性，其中包含在选择该选项时要提交给服务器的数据值。如果不包括value属性，该值默认为元素中包含的文本。您可以在<option>元素上包含selected属性，使其在首次加载页面时默认处于选中状态。

工作示例

- 应用程序. 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})

模板/索引. 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>

赞(0）回复(0）举报 2022-12-21

我来回答

如何使用FastAPI提交HTML下拉列表？

1条答案

工作示例

相关问题

热门标签

最新问答