ホームページ >バックエンド開発 >Python チュートリアル >Swagger UI を使用せずに JSON データを FastAPI に投稿するにはどうすればよいですか?
Swagger UI を使用せずに JSON データを FastAPI に投稿するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-10-24 05:26:02929ブラウズ
Swagger UI を使用しない FastAPI への JSON データの投稿
FastAPI を使用する場合、Swagger UI を使用せずに JSON データをバックエンドに投稿する方法を理解しておくと役立ちます。 Swagger UI に依存します。このアプローチでは、指定された URL を介してデータを直接投稿し、ブラウザで結果を取得できます。
JavaScript インターフェイスの使用
これを実現するには、 JSON 形式でデータを送信できるようにする Fetch API などの Javascript インターフェイス。次のコード例を考えてみましょう。
<code class="javascript">body: JSON.stringify({name: "foo", roll: 1})</code>
このコード スニペットは、送信のために Javascript オブジェクトを JSON に変換します。
フロントエンド実装
と対話するにはFastAPI バックエンドでは、次のいずれかのメソッドを利用できます。
- Jinja2Templates: この手法には、データ送信用のフォームを含む HTML/JS テンプレートのレンダリングが含まれます。その後、フォーム データを JSON に変換できます。
- 直接 JSON 投稿: Fetch API を使用すると、フォームを介さずに JSON データを直接投稿できます。
実装例
Python での次の実装例を考えてみましょう:
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 バックエンドに効果的にポストできます。このアプローチにより、柔軟性が高まり、指定された URL を介してバックエンドと直接対話できるようになります。
以上がSwagger UI を使用せずに JSON データを FastAPI に投稿するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。