Home > Article > Backend Development > How to Post JSON Data Directly to a FastAPI Backend?

How to Post JSON Data Directly to a FastAPI Backend?

Mary-Kate OlsenOriginal: 2024-10-24 04:16:02555browse

Directly Posting JSON Data to FastAPI Backend

Problem Statement:

When working with FastAPI, users may want to post JSON data directly to the backend without utilizing the Swagger UI for documentation. Instead, they aim to submit data through the designated URL and receive the result in the browser.

Solution:

To achieve this, JavaScript libraries such as the Fetch API can be employed. These tools enable the sending of JSON-formatted data.

For frontend rendering, Jinja2Templates can be utilized to return templates that include HTML and JavaScript code. One can also post JSON data directly, as demonstrated in the code examples below.

app.py

<code class="python">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})</code>

templates/index.html

<code class="html"><!DOCTYPE html>
<html>
   <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>
      <script>
         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(resp => resp.text())  // or, resp.json(), etc.
                 .then(data => {
                   document.getElementById("responseArea").innerHTML = data;
                 })
                 .catch(error => {
                   console.error(error);
                 });
         }
      </script>
   </body>
</html></code>

By following this approach, you can directly post JSON data to your FastAPI backend, without relying on Swagger UI. The data can be submitted via a form on the frontend and processed by your backend API.

The above is the detailed content of How to Post JSON Data Directly to a FastAPI Backend?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript json html fastapi for include this ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Pretty Print Nested Dictionaries with Indentation?Next article：How to Pretty Print Nested Dictionaries with Indentation?

See more

How to Post JSON Data Directly to a FastAPI Backend?

Related articles