How to post JSON data to FastAPI backend without using Swagger UI?

Question

I am trying to do a simple POST operation using FastAPI. I have created a basic structure using BaseModel, which has only two attributes, namely 'name' and 'roll'.

import uvicorn
from fastapi import FastAPI
from pydantic import BaseModel


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


app = FastAPI()


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


if __name__ == '__main__':
    uvicorn.run(app, port=8080, host='0.0.0.0')

I would like to post these data using this POST operation - {"name":"XYZ", "roll":51}

I know about the automatic documentation at http://localhost:8080/docs provided by Swagger UI (OpenAPI), which we can use to post data. But I wouldn't want to use it. What I would like is to directly post the data using the URL http://localhost:8080/ and would like to see the result in the browser itself, instead of seeing the result in Swaggger UI.

Chris · Answer 1 · 2022-04-30T18:03:16.440

You would need to use a Javascript interface/library, such as Fetch API, that allows you to send data in JSON format. Example is given below. For submiting Form data, have a look at this answer, while for posting both Files and Form/JSON data, have a look here.

You can use Jinja2Templates to render and return a TemplateResponse that includes your HTML/JS code.

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})

You can use an HTML form to submit your data and then have the form data converted into JSON, as described here. Otherwise, you could post your JSON data directly, as shown here,; for example, body: JSON.stringify({name: "foo", roll: 1}).

templates/index.html

<html>
   <head>
      <script type="text/javascript">
         function submitForm() {
             var formElement = document.getElementById('myForm');
             var data = new FormData(formElement);
             fetch('/', {
                   method: 'POST',
                   headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json'
                 },
                   body: JSON.stringify(Object.fromEntries(data))
                 })
                 .then(response => response.text())
                 .then(data => {
                   document.getElementById("responseArea").innerHTML = data;
                 })
                 .catch(error => {
                   console.error(error);
                 });
         }
      </script>
   </head>
   <body>
      <h1>Post JSON Data</h1>
      <form method="post" id="myForm">
         name : <input type="text" name="name" value="foo">
         roll : <input type="number" name="roll" value=1>
         <input type="button" value="Submit" onclick="submitForm()">
      </form>
      <div id="responseArea"></div>
   </body>
</html>

How to post JSON data to FastAPI backend without using Swagger UI?

1 Answers1