Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk Menghantar Data JSON ke Titik Akhir FastAPI tanpa UI Swagger?
Bagaimana untuk Menghantar Data JSON ke Titik Akhir FastAPI tanpa UI Swagger?
- Patricia Arquetteasal
- 2024-10-24 02:32:02531semak imbas
Memintas UI Swagger untuk Penyiaran Data JSON dalam FastAPI
Walaupun UI Swagger (OpenAPI) menawarkan cara yang mudah untuk menguji titik akhir API, mungkin terdapat senario yang anda perlukan untuk menghantar data JSON secara langsung tanpa penggunaannya. Artikel ini menyediakan penyelesaian untuk menyiarkan data JSON ke titik akhir FastAPI menggunakan antara muka JavaScript.
Untuk mencapai matlamat ini, kami akan menggunakan API Ambil, yang membenarkan penghantaran data dalam format JSON. Selain itu, kami akan menggunakan Jinja2Templates untuk mencipta templat untuk bahagian hadapan.
Pelaksanaan Belakang
Dalam app.py, aplikasi FastAPI ditakrifkan dengan titik / yang menerima permintaan POST dengan model Item .
<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>
Pelaksanaan Depan
Dalam templat index.html, borang HTML disediakan untuk memasukkan data nama dan gulungan. Fungsi submitForm() menggunakan API Ambil untuk menghantar data sebagai JSON.
<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>
Penggunaan
Navigasi ke http://localhost:8080/ untuk mengakses bahagian hadapan. Masukkan data ke dalam borang dan klik butang "Serah". Respons daripada titik / akhir akan dipaparkan dalam div "responseArea" HTML.
Perhatikan bahawa anda boleh mengendalikan pengecualian yang dilemparkan oleh titik akhir dalam kod JavaScript anda dengan menggunakan kaedah .catch() seperti yang ditunjukkan dalam contoh.
Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data JSON ke Titik Akhir FastAPI tanpa UI Swagger?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!