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:02448semak imbas

How to Send JSON Data to FastAPI Endpoints without Swagger UI?

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!

JavaScript json html fastapi for format catch using Interface function this input http ui Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Menghantar Data JSON ke FastAPI tanpa UI Swagger?Artikel seterusnya：Bagaimana untuk Menghantar Data JSON ke FastAPI tanpa UI Swagger?

Artikel berkaitan

Lihat lagi