如何将数组数据从javascript发送到flask

2023-12-26

如何将数组从 javascript 发送到 python Flask。 ajax 没有将数组(值)返回到 Flask 路由。任何人都可以帮助解决这些错误

#flask route
@app.route('/admin',methods = ['POST','GET'])
def admin():
    if request.method == "POST":
        a=request.form.getlist("contacts[]")
        return str(a)
#js code
window.onload = function(){}
var btn = document.querySelector("#btn");
btn.onclick = function(){
    var div= document.createElement("div");
    div.innerHTML = generateit();
    document.getElementById("box").appendChild(div);
}

function generateit()
{
 return "<input type='text' class='txt' placeholder='Enter party name' required>&nbsp<input type='text' class ='txt1' placeholder = 'Enter region' required>&nbsp<input type='text' class='txt2' placeholder='Enter name' required>&nbsp<button id ='btn' onclick='removeit(this);'>Remove</button>";
}

function removeit(btn)
{
    document.getElementById("box").removeChild(btn.parentNode);
}

values =[]
$.ajax({
    url:'{{url_for("admin")}}',
    type:'POST',
    data:{contacts:values},
    success:function(res){}
  });




}

假设你的 html 代码是这样的:

<butoon id="generate_row">generate row</butoon>
<div id="box">
    <button onclick="send()">send</button>
</div>

这是你的 JavaScript 代码:

    window.onload = function () {
        var btn = document.querySelector("#generate_row");
        var box = document.getElementById("box");

        btn.onclick = function () {
            var div = document.createElement("div");
            var row_num = box.querySelectorAll("#box > div").length + 1;  // add 1 to start from 1
            div.innerHTML = generateit(row_num);
            box.appendChild(div);
        }
    }

    function generateit(row_num) {
        return `<input type='text' placeholder='Enter party name' required>
                <input type='text' placeholder = 'Enter region' required>
                <input type='text' placeholder='Enter name' required>
                <button id ='btn_remove${row_num}' onclick='removeit(this);'>Remove</button>`;
    }

    function removeit(btn) {
        document.getElementById("box").removeChild(btn.parentNode);
    }

    function send() {
        values = [];
        let divs = document.querySelectorAll("#box > div");

        divs.forEach(innerDiv => {
            let innerDivValues = [];
            let textInputs = innerDiv.querySelectorAll("input[type='text']");
            textInputs.forEach(inputElement => innerDivValues.push(inputElement.value))
            values.push(innerDivValues);
        });
       
        
        fetch('{{url_for("site_bp.formit")}}', {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({contacts: values})
        }).then(async response => await response.json())
        .then(data => {
            console.log(data);
        })
    }

和你的烧瓶路线:

@bp.route('/formit',methods = ['POST','GET'])
def formit():
    if request.method == "POST":
        contacts=request.json.get("contacts", None)
        for contact in contacts:
            print (contact)
        return {"contacts": contacts}
    return "not post request"

我使用了蓝图,所以不要对 @bp 或 site_bp.formit 感到困惑

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

如何将数组数据从javascript发送到flask 的相关文章

随机推荐

  • 构成最大总和的数字

    我刚刚编写了我的程序 它从数组中找到最大和 但我陷入困境 有什么方法可以找到哪些数字对最大总和做出了贡献 给出最大总和规则 相邻元素不应贡献 合计 我对数组中最大总和的解决方案 public class MaximumELementInAR
  • Java - 设置类路径

    我的示例应用程序告诉我 No qtjambi deployment xml found in classpath loading libraries via java library path 我希望我的应用程序使用qtjambi depl
  • 从 PowerShell 运行 cmd /c,文件路径中包含空格

    我正在尝试在 PowerShell 中运行以下命令 PS C Users Administrator gt cmd c C Program Files x86 Microsoft Visual Studio 2017 BuildTools
  • 为什么我会看到“Nodetool 状态连接被拒绝”?

    我已经通过运行 Ubuntu 16 的 EC2 实例上的服务安装了 Cassandra 但我一生都无法理解为什么我无法使 nodetool 状态正常工作 我听说我应该更改 cassanda env sh 以包含主机名 我已经在这里完成了 a
  • 在 MATLAB 中使用 Levenberg-Marquardt (lsqcurvefit) 获取协方差矩阵

    我正在使用 Matlab 中的 lsqcurvefit 函数对一些实验数据进行建模 数据采用特定的形状 因此算法只是调整该形状的系数来改变其幅度等 该模型运行良好并且拟合良好 我已经计算了卡方 Levenberg Marquardt 算法的
  • 为什么要使用开始活动?

    我一直在浏览 API 文档 并注意到从 API 级别 16 开始Context http developer android com reference android content Context html类包含以下方法 public
  • 使用房间时“无法合并 dex”

    我正在尝试向我的项目添加一个 房间 当我尝试构建项目时 出现错误 错误 任务 app transformDexArchiveWithExternalLibsDexMergerForDebug 执行失败 java lang RuntimeEx
  • 将 IDataErrorInfo 与嵌套对象结合使用

    我正在使用 MVVM 我想使用 IDataErrorInfo 来验证我的视图 我当前的实现包括嵌套对象和不同的 ViewModel 例如业务实体 客户 包含业务实体 地址 我在我的视图中直接访问地址 例如 Customer Address
  • 如何使 Protobuf 3 字段成为必填字段?

    我正在使用 GRPC proto buffers 在 GoLang 中编写我的第一个 API 端点 我对 Go 还很陌生 以下是我为测试用例编写的文件 package my package import context testing gi
  • 未找到 Mysqli 类。使用percona、php5-fpm、nginx、phalcon

    Fatal error Class TKStdlib mysqli not found in var www tk browser app application library tk stdlib DbAbstract php on li
  • 如何在rails中自定义bulma变量

    我正在使用 bulmarails gem 我想自定义它使用的一些变量 特别是字体颜色 根据布尔玛文档http bulma io documentation overview customize http bulma io documenta
  • Kubernetes 服务到底是什么以及它们与部署有何不同

    在阅读了这样的 Kubernetes 文档后 部署 https kubernetes io docs concepts workloads controllers deployment service https kubernetes io
  • 检查渲染方法

    我正在使用react redux 和react redux router 当我运行应用程序时 出现错误 我不明白它与我的 App js 中的 React 渲染函数有什么关系 在我看来 问题出在代码的其他地方 错误如下 Warning Rea
  • 如何在“map”对象中编写 OpenAPI 3 (Swagger) 规范的属性名称?

    我试图描述的 API 具有一个结构 其中根对象可以包含任意数量的子对象 属性本身就是对象 根对象中的 键 或属性是子对象的唯一标识符 值是子对象的其余数据 child1 bunch of stuff child2 bunch of stuf
  • Oracle 的 C# 参数化查询 - 严重且危险的错误!

    这绝对是一个嚎叫 我不敢相信自己的眼睛 而且我不敢相信 如果这是 C 中的一个真正的错误 那么在我之前没有人会发现这一点 所以我将其发布给开发人员社区的其他成员 让他们告诉我我做错了什么 我确信这个问题会让我说 DOH 然后用手掌用力拍打我
  • 将列中的任意字符串替换为 1

    我正在和熊猫一起工作 我的目标是将数据帧中包含 NaN 或字符串数 据的几列转换为或多或少的虚拟变量 0 代表 NaN 1 代表任何字符串 我想在不使用完整的字符串列表并替换它们的情况下执行此操作 因为存在拼写错误 这会导致错误 我已经能够
  • 通过 api.linkedin.com/v2/shares 检索共享时排序不正确

    根据文档 https learn microsoft com en us linkedin marketing integrations community management shares share api retrieve shar
  • DPDK RX/TX 回调示例应用程序中没有流量出现

    我是DPDK领域的新生 我从 DPDK 主页给出的示例应用程序开始 我被这个例子困住了 DPDK RX TX 回调示例应用程序 https doc dpdk org guides sample app ug rxtx callbacks h
  • Android检测webview URL变化

    我的 android 应用程序中有一个 webview 希望检测 url 何时发生变化 我想用它来当用户位于 info php 页面上时隐藏顶部栏中的信息按钮 并在用户不在 info php 页面上时再次显示该按钮 我用谷歌搜索但找不到任何
  • 如何将数组数据从javascript发送到flask

    如何将数组从 javascript 发送到 python Flask ajax 没有将数组 值 返回到 Flask 路由 任何人都可以帮助解决这些错误 flask route app route admin methods POST GET