如何使用 FastAPI 防止在表单输入时重新加载页面
[英]How to prevent page reload on form input with FastAPI
问题描述
I have a simple program using FastAPI that multiplies a float value by 2 and displays it in HTML;
我有一个使用 FastAPI 的简单程序，它将浮点值乘以 2 并将其显示在 HTML 中； this value is inputted through a HTML form.该值通过 HTML 表格输入。 I'm wondering how I can get the value to display dynamically, without the page reloading when you press enter or press the submit button.我想知道如何让值动态显示，而无需在按下回车键或按下提交按钮时重新加载页面。
Here are the scripts (main.py and double.html):以下是脚本（main.py 和 double.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
<form method="post">
<input type="number" step="0.00000001" name="num"/>
<input type="submit"/>
</form>
<p>Result: {{ result }}</p>
</body>
</html>
from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
import uvicorn
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def double_num(request: Request):
result = "Type a number"
return templates.TemplateResponse('double.html', context={'request': request, 'result': result})
@app.post("/", response_class=HTMLResponse)
async def double_num(request: Request, num: float = Form(...)):
result = num*2
return templates.TemplateResponse('double.html', context={'request': request, 'result': result})
if __name__ == "__main__":
uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
I realize similar questions have been asked but they seem to involve jquery/javascript and don't work for me due to the FastAPI/python backend.我意识到有人问过类似的问题，但它们似乎涉及 jquery/javascript 并且由于 FastAPI/python 后端而对我不起作用。
1 个解决方案
解决方案1
2 2022-08-15 09:47:01
As described in this answer , to keep the page from reloading/redirecting when submitting an HTML <form> , you would need to use a Javascript interface/library, such as Fetch API , to make an asynchronous HTTP request. As described in this answer , to keep the page from reloading/redirecting when submitting an HTML <form> , you would need to use a Javascript interface/library, such as Fetch API , to make an asynchronous HTTP request. If you would like to prevent the page from reloading when the user hits the enter key as well, you could use a similar approach to this answer that provides a solution on how to handle the <form> submission on the submit event (using the Event.preventDefault() method).如果您还想在用户按下回车键时阻止页面重新加载，您可以使用与此答案类似的方法，该方法提供了有关如何处理提交事件上的<form>提交的解决方案（使用Event.preventDefault()方法）。 Example below:下面的例子：
app.py应用程序.py
from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def double_num(request: Request):
return templates.TemplateResponse('double.html', context={'request': request})
@app.post("/")
async def double_num(num: float = Form(...)):
result = num * 2
return result
templates/ double.html模板/双.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault(); // Cancel the default action
submitForm();
});
});
</script>
</head>
<body>
<h1>Hello World!</h1>
<form id="myForm">
<input type="number" name="num">
<input class="submit" type="submit" value="Submit">
</form>
<div id="responseArea">Type a number</div>
<script>
function submitForm() {
var formElement = document.getElementById('myForm');
var data = new FormData(formElement);
fetch('/', {
method: 'POST',
body: data,
})
.then(response => response.text())
.then(data => {
document.getElementById("responseArea").innerHTML = data;
})
.catch(error => {
console.error(error);
});
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.