Maison > Article > développement back-end > Comment publier des données JSON directement sur un backend FastAPI ?

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

Mary-Kate Olsenoriginal: 2024-10-24 04:16:02561parcourir

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>

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>

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!

JavaScript json html fastapi for include this ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment imprimer joliment des dictionnaires imbriqués avec indentation ?Article suivant：Comment imprimer joliment des dictionnaires imbriqués avec indentation ?

Articles Liés

Voir plus