如何将数据从 Flask 发送到 JavaScript?

2024-03-11

你好,我是新人,正在用 Flask 和 Javascript 构建一个应用程序。我在从 Flask do JavaScript 发送数据时遇到问题。

我在routes.py中有代码

@app.route('/mapaa',methods=['GET','POST'])
def mapa():
    user_id = current_user.get_id()
    slownik = {}


    if 'event_form' in request.form:
        name = request.form['name_event']
        all_data = Event.query.filter_by(name=name).all()
        for row in all_data:
            date_st_string = str(row.date_start)
            date_end_string = str(row.date_end)
            slownik = {'id':row.id,'date_st':date_st_string,'date_end':date_end_string,'type':row.type,'name':row.name,'len_route':row.len_route,'route':row.route}
        return jsonify(slownik)
    return render_template('mapaa.html', title='Mapa')

我想发送jsonify(slownik)我的 JavaScript 代码,但我不想这样做render_template因为它刷新页面,我需要这些数据使用 JavaScript 将其显示在地图上。我试过return jsonify(slownik)但它返回我新页面上的数据。当用户点击时如何发送数据event_form按钮到 JavaScript 而不刷新页面?


您可以使用ajax发送post请求,而无需刷新页面。 注意-在此之前包含 jquery

<script src="https://code.jquery.com/jquery-3.1.0.js" ></script>

JavaScript 代码

$("#id_of_btn").click(function () { // make ajax request on btn click
  $.ajax({
    type: "POST",
    url: "/mapaa", // url to the function
    data: {
      name: $("#id_of_input_tag").val(), // value of the form
    },
    success: function (response) {
      console.log(response); // response contains the json
    },
  });
});

确保您不使用表单标签。

编辑: 如果您想通过表单发送更多数据,您可以使用

data: $('form').serialize()

这将获取输入标签的 name 属性并将其添加到 request.data 中 所以如果你有这个

<input type="text" id="element_id" name="username" > 

您可以像这样使用 name 属性的值request.data['username']按照这个tutorial https://www.bogotobogo.com/python/Flask/Python_Flask_with_AJAX_JQuery.php

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

如何将数据从 Flask 发送到 JavaScript? 的相关文章

  • JavaScript:String 和 Array 上的 indexOf 方法的效率差异

    我很好奇效率是否存在差异indexOf两者都可用的方法Array and String在 JavaScript 中 我以为indexOf在 String 上的效率低于在 Array 上的效率 而我的new测试结果支持了这一点 例如 var
  • 如何在phonegap中同时使用相机API选择多个图像?

    如何同时选择或拾取多个图像phonegap camera API使用时Camera DestinationType FILE URI 我一次只能选择一张图像 我可以使用以下命令在 SD 卡中选择多个文件 包括 txt pdf this ht
  • 使用 webpack 保留输出目录中的文件夹结构

    我有以下文件夹结构 index html app index tsx 与 webpack 捆绑后 我希望有以下输出目录 并将bundle js注入到index html中 dist index html dist app bundle js
  • 重写node.js中其他模块中的函数

    我正在尝试在 Node js 应用程序中使用 nodeunit 存根函数 这是我正在尝试做的事情的简化版本 In lib file js var request require request var myFunc function inp
  • 如何读取 sql 查询到 pandas dataframe / python / django

    我在下面使用这个views py获取应用程序 from django db import connection def test request cursor connection cursor sql SELECT x n from ta
  • 如何将文本文件中的十六进制行转换为数组(Python)?

    我有一个文本文件 每行包含一个十六进制明文 我的文件如下所示 7a8e5dc390781eab8df2c090bf4bebca dbac0fba55d3d4fc177161bfe24dc7fb 82e5a7a021197f6fbe94a86
  • Python:选择多个已安装模块版本之一

    在我的系统上 我多次安装了多个模块 举个例子 numpy 1 6 1安装在标准路径中 usr lib python2 7 dist packages 我有一个更新版本numpy 1 8 0安装于 local python lib pytho
  • 使用 Firefox 插件发出跨域 ajax 请求

    我对如何在 Firefox 插件中发出跨域 ajax 请求感到有点困惑 LastPass 和 Xmarks 等插件建议你可以做到这一点 但是当我尝试用 google 搜索你是如何做到这一点时 每个人似乎都说你不能 除非用户在 Firefox
  • 在 Node.js 中封装 require 可以解决相对路径调用

    我正在尝试创建一个 require 包装器来加载依赖项 但我发现很难让它像原始的 require 函数一样工作 当路径是相对路径时 包装器无法解析为正确的路径 因为我的加载程序和调用程序文件不在同一文件夹中 这是一个简化的描述 index
  • Google 脚本过滤一个值的范围

    我想过滤第 1 列中仅包含 Bob 特定值的行的 google 工作表范围 到目前为止 我的代码允许我过滤out第 1 列中有 Bob 的行 我需要相反 我想返回第 1 列中只有 Bob 的行 因此 其中 filterSettings 不是
  • Django:上传前调整图像大小

    我想调整图像大小 Pillow 在上传之前 我在下面编写了代码但不起作用 并得到错误 myapp list 处的属性错误 坚定的 请求方式 POST 请求网址 http 127 0 0 1 8000 myapp list http 127
  • Javascript:如何过滤对象数组并对结果求和

    我有一个对象数组 var example a 1 b 2 c 3 a 4 b 5 c 6 a 7 b 8 c 9 我正在尝试添加所有不对应的值c 我已经设法用 console log test filter x gt x c gt 3 过滤
  • SQL查询中的Python列表作为参数[重复]

    这个问题在这里已经有答案了 我有一个 Python 列表 比如说 l 1 5 8 我想编写一个 SQL 查询来获取列表中所有元素的数据 例如 select name from students where id IN THE LIST l
  • javascript:新日期,缺少年份

    我打电话给 new Date Jan 4 发现默认年份是2001年 a new Date Jan 4 Thu Jan 04 2001 00 00 00 GMT 0500 EST 有什么办法可以将默认年份设置为 2011 年吗 更新 我知道我
  • Python 中的“finally”总是执行吗?

    对于Python中任何可能的try finally块 是否保证finally块总是会被执行吗 例如 假设我在except block try 1 0 except ZeroDivisionError return finally print
  • 如何在 jest 中测试调用和应用函数?

    这是我的callnapply js file const callAndApply caller object method nameArg ageArg tShirtSizeArg method call object nameArg a
  • 如何在JAVascript中删除具有相同ID但display='block'和display='none'的div

    我有超过 1 个 div 具有相同的 id 但其中一个具有 display block 和其他人有显示 无 我想删除所有具有 display none 的 div 请告诉最简单的方法 文档中多个元素具有相同的 id 是违反 W3 标准的 请
  • 使用 PyCharm 分析 Django

    即使在开发环境中 我的应用程序也相当慢 所以我想找出是什么导致它变慢 以便我可以尝试修复它 我了解调试工具栏 根据它的报告 数据库查询和下载的源都不是问题 所以它一定是业务逻辑 但是 我无法使用 Django 服务器运行 PyCharm 分
  • 媒体文件上的 404 - Django

    昨晚我将项目上传到 pythonanywhere com 我想在那里测试我的项目生产设置 在我允许的模型之一中用户上传JPG 团队徽标 上传过程运行良好 文件位于我的 MEDIA ROOT 中 问题是 当我尝试在模板中访问它 以将其显示在页
  • Python 线程与 Linux 中的多处理

    基于此question https stackoverflow com questions 807506 threads vs processes in linux我假设创建新流程应该几乎和创造新线程在Linux中 然而 很少的测试显示出截

随机推荐