Bypassing Swagger UI for JSON Data Input in FastAPI

When working with FastAPI, it's possible to post JSON data without the intermediary of the Swagger UI. Here's how to achieve this:

JavaScript Interface for JSON Data Submission

Employ a JavaScript-based interface like the Fetch API to send data in JSON format. Here's an example:

var data = {
    name: "foo",
    roll: 1
}

fetch('/', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
}).then(resp => {
    return resp.text();
}).then(data => {
    // Handle the response
});

HTML Form and Jinja2 Templates

Alternatively, you can utilize Jinja2 Templates and an HTML form to submit your data. Here's how:

app.py

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel

app = FastAPI()
templates = Jinja2Templates(directory="templates")

class Item(BaseModel):
    name: str
    roll: int

@app.post("/")
async def create_item(item: Item):
    return item

@app.get("/")
async def index(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

index.html

By using these techniques, you can conveniently post JSON data to your FastAPI backend without relying on the Swagger UI interface.