FastAPI Post request is not rendering jinja2 template [duplicate]

Question

I have made up the post call and render the jinja2 template of login_form.html

main.py:

from fastapi import FastAPI, Response, status, HTTPException, Depends
import hashlib
from fastapi import APIRouter, Form
from pydantic import BaseModel
from fastapi.staticfiles import StaticFiles
from fastapi import Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="templates")


@app.post("/",response_class=HTMLResponse)
async def login_form(
    request: Request, uname: str = Form(...), passcode: str = Form(...)
):
    print(uname, passcode)
    return templates.TemplateResponse(
        "auth/login_form.html", {"request": request,"result": "res"}
    )

login_form.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login Form</title>
    </head>
<body>
<h1>Login Form</h1>
<form method="post">
<h5>Username</h5>
<input type="text" name="uname" placeholder="username"></input>
<h5>Password</h5>
<input name="passcode" placeholder="password" type="text"></input>
<input type="submit"></input>
</form>

<p>{{result}}</p>
</body>
</html>

When I load the page on web browser I get:

{"detail":"Method Not Allowed"}

Opening it from browser is a GET request, instead you declared a POST one — Federico Provenziani
– Federico Provenziani, Commented Dec 27, 2021 at 9:59
@FedericoProvenziani yes but i have seen the jinja2 and fastAPI tutorials that POST requests open like this because it return the html Page at the end — Abubakar
– Abubakar, Commented Dec 27, 2021 at 10:03
Sorry, seeing the image and reading your words i thought you tried to access the page from a direct request instead of submitting the form — Federico Provenziani
– Federico Provenziani, Commented Dec 27, 2021 at 10:07
I still think @FedericoProvenziani is correct; where is the GET endpoint that displays the template? Since you're not doing anything with the template in the POST endpoint, it seems like that was meant to be a regular GET endpoint? — MatsLindh
– MatsLindh, Commented Dec 27, 2021 at 11:33
Please have a look at related answers here, here and here, as well as here, here and here — Chris
– Chris, Commented Mar 17, 2023 at 6:38

Julia Meshcheryakova · Accepted Answer · 2022-12-30 12:51:44Z

1

You need two routes first get the template then make post:

@app.get("/")
@app.post("/")

edited Dec 30, 2022 at 12:51

Julia Meshcheryakova

3,3023 gold badges24 silver badges44 bronze badges

answered Dec 29, 2022 at 15:56

Mehdi

132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul P · Accepted Answer · 2021-12-28 10:24:12Z

If you want this to work in the browser, login_form() will have to be a GET endpoint.

If you've seen examples using POST with FastAPI, that's probably because that was for building an API rather than a web app (maybe Starlette is what you're actually looking for).

In order to make your solution work in the browser (with FastAPI) you can add another endpoint (which I'm calling POST /handle-form). You will also have to adapt your login_form.html template (see below).

from fastapi import FastAPI, Form, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def login_form(request: Request):
    return templates.TemplateResponse(
        "auth/login_form.html", {"request": request, "result": "res"}
    )

@app.post("/handle-form")
async def handle_form(
    request: Request,
    uname: str = Form(...),
    passcode: str = Form(...),
):
    print(uname, passcode)

The only change to login_form.html is adding action="handle-form" to the form tag, where handle-form is the the path to the endpoint to post the form data to:

...
<form action="handle-form" method="post">
...

It renders like this:

Once you've entered the username and password and pressed Submit, uname and passcode will be sent to handle_form().

Collectives™ on Stack Overflow

FastAPI Post request is not rendering jinja2 template [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related