我正在使用 fastAPI 創建一個 API，它從 HTML 頁面接收表單，對其進行處理（需要一些時間）并回傳一條訊息，說明此任務已完成。我的 API 構建方式是：
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 的帖子的回傳只是重定向到一個只顯示回傳訊息的頁面。我一直在尋找一種替代方法，可以保持表單出現并在此表單下方顯示我想要的訊息，例如：
我在fastAPI 檔案中搜索了 requests，但沒有找到任何可以避免不修改原始 HTML 頁面的內容。
uj5u.com熱心網友回復：
您需要使用 Javascript 介面/庫（例如Fetch API）來發出異步 HTTP 請求。此外，您應該使用模板來呈現和回傳 a TemplateResponse，而不是FileResponse，如您的代碼中所示。下面的例子：
應用程式.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})
模板/ index.html
<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.json())
.then(data => {
document.getElementById("response_area").innerHTML = data;
})
.catch(error => {
console.error(error);
});
}
</script>
<html>
<head>
<h1><b>Super resolution image treatment</b></h1>
<body>
<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="response_area"><div>
</body>
</head>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/452246.html
下一篇：Django模型表單不保存資料