ホームページ >バックエンド開発 >Python チュートリアル >JSON データを FastAPI バックエンドに直接ポストするにはどうすればよいですか?
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 サイトの他の関連記事を参照してください。