Heim > Artikel > Backend-Entwicklung > Wie sende ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI-Endpunkte?

Wie sende ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI-Endpunkte?

Patricia ArquetteOriginal: 2024-10-24 02:32:02448Durchsuche

How to Send JSON Data to FastAPI Endpoints without Swagger UI?

Umgehen der Swagger-Benutzeroberfläche für die Veröffentlichung von JSON-Daten in FastAPI

Während die Swagger-Benutzeroberfläche (OpenAPI) eine bequeme Möglichkeit zum Testen von API-Endpunkten bietet, gibt es möglicherweise Szenarios, in denen Sie dies benötigen um JSON-Daten direkt ohne deren Verwendung zu senden. Dieser Artikel bietet eine Lösung zum Posten von JSON-Daten an einen FastAPI-Endpunkt mithilfe einer JavaScript-Schnittstelle.

Um dies zu erreichen, verwenden wir die Fetch-API, die das Senden von Daten im JSON-Format ermöglicht. Darüber hinaus werden wir Jinja2Templates verwenden, um eine Vorlage für das Frontend zu erstellen.

Backend-Implementierung

In app.py wird die FastAPI-Anwendung mit einem /-Endpunkt definiert, der POST-Anfragen mit einem Item-Modell akzeptiert .

<code class="python">from fastapi import FastAPI, Request, HTTPException
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel

class Item(BaseModel):
    name: str
    roll: int

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.post("/")
async def create_item(item: Item):
    if item.name == "bad request":
        raise HTTPException(status_code=400, detail="Bad request.")
    return item

@app.get("/")
async def index(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})</code>

Frontend-Implementierung

In der Vorlage index.html wird ein HTML-Formular zur Eingabe von Namen und Rollendaten bereitgestellt. Die Funktion „submitForm()“ verwendet die Fetch-API, um die Daten als JSON zu senden.

<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())
        .then(data => {
          document.getElementById("responseArea").innerHTML = data;
        })
        .catch(error => {
          console.error(error);
        });
      }
    </script>
  </body>
</html></code>

Verwendung

Navigieren Sie zu http://localhost:8080/, um auf das Frontend zuzugreifen. Geben Sie Daten in das Formular ein und klicken Sie auf die Schaltfläche „Senden“. Die Antwort vom Endpunkt / wird im Div „responseArea“ des HTML angezeigt.

Beachten Sie, dass Sie Ausnahmen, die vom Endpunkt in Ihrem JavaScript-Code ausgelöst werden, mithilfe der Methode .catch() behandeln können, wie gezeigt im Beispiel.

Das obige ist der detaillierte Inhalt vonWie sende ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI-Endpunkte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json html fastapi for format catch using Interface function this input http ui Access

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie übermittle ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI?Nächster Artikel：Wie übermittle ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI?

In Verbindung stehende Artikel

Mehr sehen