首页 > 文章 > 后端开发 > 如何将 JSON 数据直接发布到 FastAPI 后端？

如何将 JSON 数据直接发布到 FastAPI 后端？

Mary-Kate Olsen原创: 2024-10-24 04:16:02555浏览

How to Post JSON Data Directly to a FastAPI Backend?

直接将 JSON 数据发布到 FastAPI 后端

问题陈述：

使用 FastAPI 时，用户可能希望将 JSON 数据直接发布到后端，而不使用 Swagger UI 进行文档记录。相反，他们的目标是通过指定的 URL 提交数据并在浏览器中接收结果。

解决方案：

为了实现这一点，JavaScript 库（例如 Fetch API）可以就业。这些工具可以发送 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>

通过这种方法，您可以直接将 JSON 数据发布到 FastAPI 后端，而无需依赖 Swagger UI。数据可以通过前端的表单提交并由后端 API 处理。

以上是如何将 JSON 数据直接发布到 FastAPI 后端？的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json html fastapi for include this ui

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Pretty Print Nested Dictionaries with Indentation?下一篇：How to Extract Multi-Line Matches with Markers in Log Files Using Regular Expressions?

查看更多