Comment soumettre des données JSON à FastAPI sans l'interface utilisateur Swagger ?

Contournement de l'interface utilisateur Swagger pour la saisie de données JSON dans FastAPI

Lorsque vous travaillez avec FastAPI, il est possible de publier des données JSON sans l'intermédiaire de l'interface utilisateur Swagger. Voici comment y parvenir :

Interface JavaScript pour la soumission de données JSON

Utilisez une interface basée sur JavaScript telle que l'API Fetch pour envoyer des données au format JSON. Voici un exemple :

<code class="javascript">var data = {
    name: "foo",
    roll: 1
}

fetch('/', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
}).then(resp => {
    return resp.text();
}).then(data => {
    // Handle the response
});</code>

Formulaire HTML et modèles Jinja2

Vous pouvez également utiliser les modèles Jinja2 et un formulaire HTML pour soumettre vos données. Voici comment :

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>

index.html

<code class="html"><form method="post">
    <input type="text" name="name" value="foo">
    <input type="number" name="roll" value="1">
    <input type="submit" value="Submit">
</form>

<div id="responseArea"></div>

<script>
    document.querySelector('form').addEventListener('submit', (event) => {
        event.preventDefault();
        var data = new FormData(event.target);

        fetch('/', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(Object.fromEntries(data))
        }).then(resp => {
            return resp.text();
        }).then(data => {
            document.getElementById("responseArea").innerHTML = data;
        }).catch(error => {
            console.error(error);
        });
    });
</script></code>

En utilisant ces techniques, vous pouvez facilement publier des données JSON sur votre backend FastAPI sans compter sur l'interface utilisateur de Swagger.

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!