如何在不将用户重定向到另一个页面的情况下发送 FastAPI 响应？-解网

问：

我正在使用 FastAPI 创建一个 API，它从 HTML 页面接收数据，处理数据（需要一些时间）并返回一条消息，说明此任务已完成。form-data

这是我的后端：

from cgi import test
from fastapi import FastAPI, Form, Request
from starlette.responses import FileResponse

app = FastAPI()

@app.post("/")
async def swinir_dict_creation(request: Request,taskname: str = Form(...),tasknumber: int = Form(...)):

    args_to_test = {"taskname":taskname, "tasknumber":tasknumber} # dict creation
    print('\n',args_to_test,'\n')
    # my_function_does_some_data_treatment.main(args_to_test)
    # return 'Treating...'
    return 'Super resolution completed! task '+str(args_to_test["tasknumber"])+' of '+args_to_test["taskname"]+' done'

@app.get("/")
async def read_index():
    return FileResponse("index.html")

这是我的前端代码：

<html>
   <head>
      <h1><b>Super resolution image treatment</b></h1>   
      <body>
        <form action="http://127.0.0.1:8000/" method="post" enctype="multipart/form-data">

            <label for="taskname" style="font-size: 20px">Task name*:</label>
            <input type="text" name="taskname" id="taskname" />
    
            <label for="tasknumber" style="font-size: 20px">Task number*:</label>
            <input type="number" name="tasknumber" id="tasknumber" />

            <b><p style="display:inline"> * Cannot be null</p></b>
            <button type="submit" value="Submit">Start</button>
         </form>
      </body>
   </head>
</html>

所以前端页面看起来像这样：

当后端处理完成后，在用户提交一些数据后，来自 FastAPI 后端的 return 语句只是将用户重定向到一个仅显示返回消息的新页面。我一直在寻找一种替代方法，可以使HTML表单保持显示状态，并在此表单下方显示从服务器返回的消息。例如：

我在 FastAPI 文档中搜索了有关请求的信息，但我没有找到任何可以避免修改我原始 HTML 页面的内容。

Python HTML 表单 FastAPI

您需要使用 Javascript 接口/库（例如 Fetch API）来发出异步 HTTP 请求。此外，还应使用 Templates 来呈现并返回，而不是 FileResponse，如代码中所示。还可以在此处和此处找到相关答案，其中显示了如何处理事件的提交，并防止导致页面重新加载的默认操作。如果您想发布数据，请查看此答案，而要同时发布 / 数据，请查看此答案。TemplateResponse<form>submitJSONFilesFormJSON

工作示例：

app.py

from fastapi import FastAPI, Form, Request
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.post("/submit")
async def submit(request: Request, taskname: str = Form(...), tasknumber: int = Form(...)):
    return f'Super resolution completed! task {tasknumber} of {taskname} done'

@app.get("/")
async def index(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

模板/索引.html

<!DOCTYPE html>
<html>
   <body>
      <h1>Super resolution image treatment</h1>
      <form method="post" id="myForm">
         <label for="taskname" style="font-size: 20px">Task name*:</label><br>
         <input type="text" name="taskname" id="taskname"><br>
         <label for="tasknumber" style="font-size: 20px">Task number*:</label><br>
         <input type="number" name="tasknumber" id="tasknumber">
         <p style="display:inline"><b>* Cannot be null</b></p><br><br>
         <input type="button" value="Start" onclick="submitForm()">
      </form>
      <div id="responseArea"></div>
      <script>
         function submitForm() {
             var formElement = document.getElementById('myForm');
             var data = new FormData(formElement);
             fetch('/submit', {
                   method: 'POST',
                   body: data,
                 })
                 .then(resp => resp.text())  // or, resp.json(), etc.
                 .then(data => {
                   document.getElementById("responseArea").innerHTML = data;
                 })
                 .catch(error => {
                   console.error(error);
                 });
         }
      </script>
   </body>
</html>

上一个：允许用户使用 Flask 更新动态表中的任意数量的行

下一个：根据 ec2 清单标签在撰写中选择ansible_user

如何在不将用户重定向到另一个页面的情况下发送 FastAPI 响应？

How to send a FastAPI response without redirecting the user to another page?

评论

工作示例：