Heim > Artikel > Backend-Entwicklung > Wie poste ich JSON-Daten direkt an ein FastAPI-Backend?

Wie poste ich JSON-Daten direkt an ein FastAPI-Backend?

Mary-Kate OlsenOriginal: 2024-10-24 04:16:02555Durchsuche

How to Post JSON Data Directly to a FastAPI Backend?

JSON-Daten direkt im FastAPI-Backend veröffentlichen

Problembeschreibung:

Beim Arbeiten mit FastAPI Benutzer möchten möglicherweise JSON-Daten direkt im Backend veröffentlichen, ohne die Swagger-Benutzeroberfläche zur Dokumentation zu verwenden. Stattdessen zielen sie darauf ab, Daten über die angegebene URL zu übermitteln und das Ergebnis im Browser zu empfangen.

Lösung:

Um dies zu erreichen, werden JavaScript-Bibliotheken wie die Fetch-API verwendet eingesetzt werden kann. Diese Tools ermöglichen das Senden von JSON-formatierten Daten.

Für das Frontend-Rendering kann Jinja2Templates verwendet werden, um Vorlagen zurückzugeben, die HTML- und JavaScript-Code enthalten. Man kann JSON-Daten auch direkt veröffentlichen, wie in den Codebeispielen unten gezeigt.

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>

Mit diesem Ansatz können Sie JSON-Daten direkt in Ihrem FastAPI-Backend veröffentlichen, ohne auf die Swagger-Benutzeroberfläche angewiesen zu sein. Die Daten können über ein Formular im Frontend übermittelt und von Ihrer Backend-API verarbeitet werden.

Das obige ist der detaillierte Inhalt vonWie poste ich JSON-Daten direkt an ein FastAPI-Backend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json html fastapi for include this ui

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 kann man verschachtelte Wörterbücher mit Einrückung hübsch drucken?Nächster Artikel：Wie kann man verschachtelte Wörterbücher mit Einrückung hübsch drucken?

In Verbindung stehende Artikel

Mehr sehen