How to Post JSON Data Directly to a FastAPI Backend?-Python Tutorial-php.cn

How to Post JSON Data Directly to a FastAPI Backend?

Mary-Kate Olsen

Release： 2024-10-24 04:16:02

Original

653 people have browsed it

How to Post JSON Data Directly to a FastAPI Backend?

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>

Copy after login

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>

Copy after login

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!