JSON データを FastAPI バックエンドに直接ポストするにはどうすればよいですか?-Python チュートリアル-php.cn

JSON データを FastAPI バックエンドに直接ポストするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-10-24 04:16:02

オリジナル

567 人が閲覧しました

How to Post JSON Data Directly to a FastAPI Backend?

JSON データを FastAPI バックエンドに直接投稿する

問題ステートメント:

FastAPI を使用する場合、ユーザーは、ドキュメントに Swagger UI を利用せずに、JSON データをバックエンドに直接投稿したい場合があります。代わりに、指定された URL を通じてデータを送信し、ブラウザで結果を受け取ることを目的としています。

解決策:

これを実現するには、Fetch API などの JavaScript ライブラリを使用します。雇用することができる。これらのツールを使用すると、JSON 形式のデータを送信できます。

フロントエンドレンダリングの場合、Jinja2Templates を利用して、HTML および JavaScript コードを含むテンプレートを返すことができます。以下のコード例に示すように、JSON データを直接投稿することもできます。

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>

ログイン後にコピー

このアプローチに従うと、Swagger UI に依存せずに、JSON データを FastAPI バックエンドに直接ポストできます。データはフロントエンドのフォーム経由で送信され、バックエンド API によって処理されます。

以上がJSON データを FastAPI バックエンドに直接ポストするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。