如何使用 FastAPI 防止表单输入时页面重新加载

2024-04-03

我有一个使用 FastAPI 的简单程序,它将浮点值乘以 2 并将其显示在 HTML 中;该值通过 HTML 表单输入。我想知道如何获得动态显示的值,而无需在按 Enter 或按提交按钮时重新加载页面。

以下是脚本(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)

我意识到有人问过类似的问题,但它们似乎涉及 jquery/javascript,并且由于 FastAPI/python 后端而对我不起作用。


As described in this answer https://stackoverflow.com/a/71665594/17865804, to keep the page from reloading/redirecting when submitting an HTML <form> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form, you would need to use a Javascript interface/library, such as Fetch API https://developer.mozilla.org/en-US/docs/Web/API/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 https://stackoverflow.com/a/73358937/17865804 that provides a solution on how to handle the <form> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form submission on the submit event https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event (using the Event.preventDefault() https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault method). Example below:

app.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(...)):
    return num * 2

模板/双.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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 FastAPI 防止表单输入时页面重新加载 的相关文章

随机推荐

  • 整型的 std::isnan 和 std::isinf 重载

    Cppreference 提到了重载std isnan https en cppreference com w cpp numeric math isnan and std isinf https en cppreference com w
  • 使用数字排序合并 pdf 文件

    我正在尝试编写一个 bash 脚本 将目录中的所有 pdf 文件合并到一个 pdf 文件中 命令pdfunite pdf output pdf成功实现了这一点 但它按常规顺序合并输入文档 1 pdf 10 pdf 11 pdf 2 pdf
  • JavaScript KeyCode 值在 Internet Explorer 8 中“未定义”

    我在使用我编写的一些 JavaScript 时遇到问题 但仅限于 Internet Explorer 8 在 Internet Explorer 7 或更早版本或 Mozilla Firefox 3 5 或更早版本上执行此操作没有问题 当我
  • 如何在CoreData中保存多个条目?

    我有以下代码 执行时没有错误 问题是它只保存最后一个条目 Jack Daniels 3 如何更改此设置以便保存所有三个条目 let employees NSEntityDescription insertNewObjectForEntity
  • MS Access 的良好免费替代方案 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Android:更改WindowManager添加的View的LayoutParams

    我有叠加层View管理者WindowManager 就像在这个问题 http goo gl OD1ij 简而言之 它看起来像这样 WindowManager wm WindowManager getSystemService WINDOW
  • 在 IIS 7.5 上部署 ASP.NET MVC 应用程序时出现“未配置默认文档”错误

    开发 ASp NET MVC 5 应用程序 在开发计算机 Windows 7 x86 上运行没有问题 当我尝试在 IIS 7 5 Win Server 2008 R2 64 位 上部署它时 出现 3 个错误 无法识别的属性 targetFr
  • codeigniter 中的 is_unique 用于编辑功能

    我有要求 我可以在新的添加函数中对唯一值进行验证 例如 this gt form validation gt set rules email Email required valid email is unique users Email
  • Elasticsearch 多词过滤器

    我对 Elasticsearch 还很陌生 所以这是我的问题 我想用 elasticsearch 进行搜索查询并想用多个术语进行过滤 如果我想搜索用户 tom 那么我希望获得用户 isActive 1 isPrivate 0 和 isOwn
  • JavaScript 绘图库? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 对于 JavaScript 交互式绘图库有什么建议吗 只需要绘制不同颜色的线条 多边形 文字即可 兼容
  • 类实例上元类的方法

    我想知道在元类上声明的方法会发生什么情况 我预计 如果您在元类上声明一个方法 它将最终成为一个类方法 但是 行为是不同的 例子 gt gt gt class A object classmethod def foo cls print fo
  • 目前Mono虚拟机的性能如何?

    网络上充斥着不同语言 编译器 虚拟机的各种性能测试 然而 几乎没有任何一个使用真实场景来测试性能 此外 在 Google 上搜索此类基准通常只会产生几年前的基准 因为这些基准有最多的时间来收集它们的链接 你们中有人真正了解不同虚拟机的当前性
  • 使用 antd 在组件中创建子菜单失败

    我正在使用 antd 3 5 4 我有一个包含用户管理项目的菜单 未登录时 菜单有一个带有登录页面链接的菜单项 登录后 菜单有一个子菜单 其中包含多个链接 包括注销 我只是对连接的用户进行简单的测试以显示链接或子菜单 当所有内容都在同一个文
  • 方案/球拍:画布操作

    1 正如标题所述 当我调整窗口大小时 我绘制的对象消失 但矩形保持原样 2 原点从左上角开始 但我希望它在左下角 3 除了绘图库之外 我找不到任何缩放功能 所以如果我希望实现这样的功能 一个选项是通过绘制更大的对象并刷新画布来 缩放 def
  • 使用 FileUpload 过滤文件扩展名

    我正在编写一个 ASP NET Web 应用程序 其中涉及使用FileUpload控制 此刻 这个特殊的FileUpload控件仅需要 zip 或 gz 文件类型 如果上传的文件类型不正确 则会向用户显示错误消息 该功能已经实现 我想要做的
  • Windows Phone 8.1 中的信标 - 没有可能性吗?

    首先 是的 我已经阅读了所有其他类似的问题 其次 我正在开发应用程序 WP 8 1 WinRT 它必须使用信标 我读了很多相关内容 我知道 如果不先配对 通常无法与 BLE 设备连接 但希望最后会破灭 所以我想问一下我有什么可能性 可以在代
  • 一次上传两个文件

    我正在尝试使用 codeigniters 上传类一次上传两个文件 两个文件字段 尽管提供了字段名称 codeigniter 仍会在第二个字段上产生错误 这是 codeigniter php 或 html 的限制 还是我只是错误地使用了该类
  • $concat mongodb 中的两个字段

    我有这两个集合 employees id NumberInt 0 name Max surname Power and loggableUser id NumberInt 0 employee NumberInt 1 现在我必须在以下查询中
  • 如何以递归方式将 React 组件渲染到自身中

    我有一个组件 即列表组件 列表组件可以渲染项目 通过组件ListItem 通过下面的内容可以轻松实现 import React from react import ListItem from list item list item clas
  • 如何使用 FastAPI 防止表单输入时页面重新加载

    我有一个使用 FastAPI 的简单程序 它将浮点值乘以 2 并将其显示在 HTML 中 该值通过 HTML 表单输入 我想知道如何获得动态显示的值 而无需在按 Enter 或按提交按钮时重新加载页面 以下是脚本 main py 和 dou