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

Question

I am creating an API using FastAPI, which receives form-data from an HTML page, process the data (requiring a few moments) and returns a message saying this task is complete.我正在使用 FastAPI 创建一个 API，它从 HTML 页面接收form-data ，处理数据（需要一些时间）并返回一条消息，说明此任务已完成。

This is my backend:这是我的后端：

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")

This is my frontend code:这是我的前端代码：

<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>

So the frontend page looks like this:所以前端页面是这样的：

When the processing is finished in the backend, after the user submitted some data, the return statement from FastAPI backend simply redirects the user to a new page showing only the return message.当后端处理完成后，用户提交了一些数据后，FastAPI 后端的 return 语句只是将用户重定向到一个只显示返回消息的新页面。 I was looking for a alternative that would keep the HTML form appearing and display the message returned from the server below this form.我正在寻找一种替代方法，它可以保持 HTML 表单出现并在此表单下方显示从服务器返回的消息。 For example:例如：

I searched in FastAPI documentation about requests , but I haven't found anything that could avoid modifying my original HTML page.我在FastAPI 文档中搜索了 requests ，但没有找到任何可以避免修改我原来的 HTML 页面的内容。

Answer 1

You would need to use a Javascript interface/library, such as Fetch API , to make an asynchronous HTTP request.您需要使用 Javascript 接口/库，例如Fetch API来发出异步 HTTP 请求。 Also, you should use Templates to render and return a TemplateResponse , instead of FileResponse , as shown in your code.此外，您应该使用模板来呈现和返回TemplateResponse ，而不是FileResponse ，如您的代码所示。 Example below:下面的例子：

app.py应用程序.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})

templates/ index.html模板/索引.html

<html>
   <head>
      <script type="text/javascript">
         function submitForm() {
             var formElement = document.getElementById('myForm');
             var data = new FormData(formElement);
             fetch('/submit', {
                   method: 'POST',
                   body: data,
                 })
                 .then(response => response.text())
                 .then(data => {
                   document.getElementById("responseArea").innerHTML = data;
                 })
                 .catch(error => {
                   console.error(error);
                 });
         }
      </script>
   </head>
   <body>
      <h1>Super resolution image treatment</h1>
      <form method="post" id="myForm">
         <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>
         <input type="button" value="Start" onclick="submitForm()">
      </form>
      <div id="responseArea"></div>
   </body>
</html>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-03-29 16:22:01

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-03-29 16:22:01

解决方案1
1 已采纳 2022-03-29 16:22:01