Comment publier des données JSON directement sur un backend FastAPI ?-Tutoriel Python-php.cn

Comment publier des données JSON directement sur un backend FastAPI ?

Mary-Kate Olsen

Libérer： 2024-10-24 04:16:02

original

567 Les gens l'ont consulté

How to Post JSON Data Directly to a FastAPI Backend?

Publication directe de données JSON sur le backend FastAPI

Énoncé du problème :

Lorsque vous travaillez avec FastAPI , les utilisateurs peuvent souhaiter publier des données JSON directement sur le backend sans utiliser l'interface utilisateur Swagger pour la documentation. Au lieu de cela, ils visent à soumettre des données via l'URL désignée et à recevoir le résultat dans le navigateur.

Solution :

Pour y parvenir, des bibliothèques JavaScript telles que l'API Fetch peuvent être employés. Ces outils permettent l'envoi de données au format JSON.

Pour le rendu frontend, Jinja2Templates peut être utilisé pour renvoyer des modèles qui incluent du code HTML et JavaScript. On peut également publier des données JSON directement, comme le démontrent les exemples de code ci-dessous.

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>

Copier après la connexion

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>

Copier après la connexion

En suivant cette approche, vous pouvez publier directement des données JSON sur votre backend FastAPI, sans compter sur l'interface utilisateur Swagger. Les données peuvent être soumises via un formulaire sur le frontend et traitées par votre API backend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!