Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk Menyiarkan Data JSON Terus ke Backend FastAPI?

Bagaimana untuk Menyiarkan Data JSON Terus ke Backend FastAPI?

Mary-Kate Olsenasal: 2024-10-24 04:16:02555semak imbas

How to Post JSON Data Directly to a FastAPI Backend?

Menyiarkan Data JSON secara langsung ke FastAPI Backend

Pernyataan Masalah:

Apabila bekerja dengan FastAPI , pengguna mungkin mahu menyiarkan data JSON terus ke bahagian belakang tanpa menggunakan UI Swagger untuk dokumentasi. Sebaliknya, mereka menyasarkan untuk menyerahkan data melalui URL yang ditetapkan dan menerima hasilnya dalam penyemak imbas.

Penyelesaian:

Untuk mencapai ini, perpustakaan JavaScript seperti API Ambil boleh diambil bekerja. Alat ini membolehkan penghantaran data berformat JSON.

Untuk pemaparan bahagian hadapan, Jinja2Templates boleh digunakan untuk mengembalikan templat yang termasuk kod HTML dan JavaScript. Seseorang juga boleh menyiarkan data JSON secara langsung, seperti yang ditunjukkan dalam contoh kod di bawah.

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>

Dengan mengikuti pendekatan ini, anda boleh menyiarkan data JSON terus ke bahagian belakang FastAPI anda, tanpa bergantung pada UI Swagger. Data boleh diserahkan melalui borang di bahagian hadapan dan diproses oleh API bahagian belakang anda.

Atas ialah kandungan terperinci Bagaimana untuk Menyiarkan Data JSON Terus ke Backend FastAPI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript json html fastapi for include this ui

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 Mencetak Cantik Kamus Bersarang dengan Lekukan?Artikel seterusnya：Bagaimana untuk Mencetak Cantik Kamus Bersarang dengan Lekukan?

Artikel berkaitan

Lihat lagi