Posting JSON Data Directly to a FastAPI Backend Without Swagger UI

FastAPI allows users to easily post JSON data to its backend, even without utilizing the automated documentation provided by Swagger UI. This article delves into the straightforward process of posting data directly to the backend URL and displaying the results in the browser.

Creating the FastAPI Application

Start by creating a basic FastAPI application with a POST operation and a model class for deserializing the JSON payload:

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

Implementing the Frontend Using JavaScript

For the frontend, we will utilize the Fetch API, which enables us to send JSON data directly to the backend URL.

fetch('/', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({name: "XYZ", roll: 51})
})
.then(resp => resp.text())
.then(data => {
    console.log(data);  // Display the result in the browser
})
.catch(error => {
    console.error(error);
});

In this script, we create a POST request, specifying the correct headers and converting the data to a JSON string. The server response is then displayed in the browser.

Alternative Methods

Other approaches for posting data to the FastAPI backend include:

• Form Data: Use a form-based approach to submit data using the FormData class.
• File and Form/JSON Data: Utilize a combination of files and form/JSON data for more complex scenarios.

Conclusion

Posting JSON data to a FastAPI backend without Swagger UI is a straightforward process that requires using JavaScript to send the data directly to the backend URL. You can choose from various methods to best suit your needs, whether it's form-based data submission or a combination of file and form/JSON data.