如何使用 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 防止表单输入时页面重新加载 的相关文章

  • 将 numpy 代码点数组与字符串相互转换

    我有一个很长的 unicode 字符串 alphabet range 0x0FFF mystr join chr random choice alphabet for in range 100 mystr re sub W mystr 我想
  • 如何使用 javascript/jquery/AJAX 调用 Django REST API?

    我想使用 Javascript jQuery AJAX 在前端调用 Django Rest API 请求方法是 POST 但当我看到 API 调用它的调用 OPTIONS 方法时 所以 我开始了解access control allow o
  • 如何使用 Angular JS 单击时将 html 模板附加到 div/指令?

    我有这种情况
  • 同页锚链接到部分 id 在 IE8 中不起作用

    我有一个带有导航的单页 HTML5 网站 可以将用户引导至该部分 在除 IE8 之外的所有浏览器中都可以正常工作 IE8 不执行任何操作 我所拥有的虚拟版本 a href about About a a href work Work a a
  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • 如何在 Django 中使用基于类的视图创建注册视图?

    当我开始使用 Django 时 我几乎使用 FBV 基于函数的视图 来处理所有事情 包括注册新用户 但当我更深入地研究项目时 我意识到基于类的视图通常更适合大型项目 因为它们更干净且可维护 但这并不是说 FBV 不是 无论如何 我将整个项目
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • Python:我不明白 sum() 的完整用法

    当然 我明白你使用 sum 与几个数字 然后它总结所有 但我正在查看它的文档 我发现了这一点 sum iterable start 第二个参数 start 的作用是什么 这太尴尬了 但我似乎无法通过谷歌找到任何示例 并且对于尝试学习该语言的
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • Werkzeug 中的线程和本地代理。用法

    首先 我想确保我正确理解了功能的分配 分配本地代理功能以通过线程内的模块 包 共享变量 对象 我对吗 其次 用法对我来说仍然不清楚 也许是因为我误解了作业 我用烧瓶 如果我有两个 或更多 模块 A B 我想将对象C从模块A导入到模块B 但我
  • 以编程方式使用 Sphinx 特定指令解析 .rst 文件

    我希望能够在 Python 中解析基于 sphinx 的 rst 以便进一步处理和检查 就像是 import sphinx p sphinx parse path to file rst do something with p 似乎在 do
  • PIL - 需要抖动,但限制调色板会导致问题

    我是 Python 新手 正在尝试使用 PIL 来执行 Arduino 项目所需的解析任务 这个问题涉及到Image convert 方法以及调色板 抖动等选项 我有一些硬件能够一次仅显示 16 种颜色的图像 但它们可以指定为 RGB 三元
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • bs4 `next_sibling` VS `find_next_sibling`

    我在使用时遇到困难next sibling 并且类似地与next element 如果用作属性 我不会得到任何返回 但如果用作find next sibling or find next 然后就可以了 来自doc https www cru
  • [cocos2d-x]当我尝试在 Windows 10 中运行“python android-build.py -p 19 cpp-tests”时出现错误

    当我尝试运行命令时python android build p cpp tests 我收到如图所示的错误 在此之前 我收到了另一条关于 Android SDK Tools 版本兼容性的错误消息 所以 我只是将 sdk 版本从 26 0 0
  • 通过 Web 界面执行 python 单元测试

    是否可以通过 Web 界面执行单元测试 如果可以 如何执行 EDIT 现在我想要结果 对于测试 我希望它们是自动化的 可能每次我对代码进行更改时 抱歉我忘了说得更清楚 EDIT 这个答案此时已经过时了 Use Jenkins https j
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • tkinter:打开一个带有按钮提示的新窗口[关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 用户如何按下 tkinter GUI 中的按钮来打开新窗口 我只需要非常简单的解决方案 如果代码也能被解释那就太好了 这

随机推荐

  • 整型的 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