如何将 HTML 下拉列表中的选定值提交到 FastAPI 后端？

问题描述 投票：0回答：1

如何在后端使用 FastAPI 并在前端使用 HTML-Jinja2 模板提交从 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
，最后，让它显示在下面。

python html jinja2 html-select fastapi
1个回答
0
投票

您需要确保在 HTML action

 中包含
<form>
 属性，该属性指定在提交 
form-data
 时发送 
<form>
 的位置（参见 W3schools 
<form>
 标记文档 作为出色地）。此外，在用于创建下拉列表的 
<select>
 元素中，确保使用 same 
name
 用于在端点中定义 
Form
 参数。根据W3schools
<select>
标签文档：




需要
name
属性来引用后面的表单数据
提交表单（如果省略
name
属性，则没有数据来自
将提交下拉列表）。




<option>
 中的每个 
<select>
 元素都应该有一个 
value
 属性，其中包含当从下拉列表中选择该选项时要提交给服务器的数据值。如果没有包含 
value
 属性，则该值默认为元素中包含的文本。您可以在 selected
 元素上包含 
<option>
 属性，使其在页面首次加载时默认选中。


工作示例


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>


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.