Bagaimana untuk Menghantar Data JSON ke FastAPI tanpa UI Swagger?

Memintas UI Swagger untuk Input Data JSON dalam FastAPI

Apabila bekerja dengan FastAPI, adalah mungkin untuk menyiarkan data JSON tanpa perantara UI Swagger. Begini cara untuk mencapainya:

Antaramuka JavaScript untuk Penyerahan Data JSON

Gunakan antara muka berasaskan JavaScript seperti API Ambil untuk menghantar data dalam format JSON. Berikut ialah contoh:

<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>

Borang HTML dan Templat Jinja2

Sebagai alternatif, anda boleh menggunakan Templat Jinja2 dan borang HTML untuk menyerahkan data anda. Begini caranya:

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>

Dengan menggunakan teknik ini, anda boleh menyiarkan data JSON dengan mudah ke bahagian belakang FastAPI anda tanpa bergantung pada antara muka UI Swagger.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data JSON ke FastAPI tanpa UI Swagger?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!