Javascript 如何访问从 Python Flask 的 render_template() 函数发送的数据？ [复制]答案

【问题标题】：How can Javascript access data sent from Python Flask's render_template() function? [duplicate]Javascript 如何访问从 Python Flask 的 render_template() 函数发送的数据？ [复制]
【发布时间】：2020-01-02 19:07:33
【问题描述】：

问题：我正在尝试从 Javascript 代码访问我发送的数据（当用户导航到网站的登录页面时），以便在文档准备好时显示它。该数据是一个数据框。

Python 代码：

from flask import Flask, render_template, jsonify
import pandas as pd
import numpy as np
from pandas import DataFrame
@app.route("/",methods = ['POST', 'GET'])
def homeLanding():
    df = pd.DataFrame(data=[['ab1234','12:34'],['cd1234','12:36'],['ae54548','12:55'],['df59894','12:56']])
    df2 = df.to_json(orient='records')
    return render_template("index.html",someResponse=df2,namespace='/test')

Javascript 代码：

$(document).ready(function(){
    //Convert response dataframe to variable
    console.log(someResponse);
    var x = JSON.parse(someResponse);
    //print response dataframe
    console.log(x);
    //populate table with response dataframe.
    $('#table1').DataTable({
        "destroy":true,
        "searching": false,
        "ordering": false,
        "paging": false,
        "bordering":true,
        data: x,
        columns: [
        {"title": 'ID'},
        {"title": 'Time'},
        ]
    });
});

html 脚本：

<!DOCTYPE html>
<html>
    <head>
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="static/js/application.js"></script>

        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="static/css/application.css">
    </head>
    <body>
        <div class="container">
            <div class="container-wrapper" margin="auto">
                <table id="table1" class="display"></table>
            </div>
        </div>
    </body>
</html>

当前状态：我一直在尝试几种将数据帧传递给 render_template() 的方法，但数据帧似乎没有发送到客户端的 Javascript 代码，或者我不知道如何正确访问来自 Javascript 响应的数据。数据框不会打印到控制台，也不会填充 table1。

提前致谢。

【问题讨论】：

首先要做的是确定数据帧是否正在序列化到客户端。查看客户端上的网络跟踪。如果它被序列化，那么您可以专注于客户端JavaScript；如果没有，则关注服务器端 Flask 应用。
谢谢。它似乎没有被序列化/发送给客户端。但是使用 render_template 发送数据帧的正确方法是什么？
不应该是"{{ someResponse }}"来代替javascript中的someResponse
谢谢。我收到一个错误：“预期的属性名称，得到 '{'”
您在 index.html 中显示的 JavaScript 代码是否真的存在？如果不是，那么模板引擎将不会注入数据帧。如果它是在 index.html 中，那么您引用注入值的方式是，例如，{{ user }}（如果您将 user 参数传递给 render_template）。

标签： javascript python json flask

【解决方案1】：

someResponse 是一个 Python 对象，它不是作为 JS 对象呈现到 html/js 上，而是本质上是一个字符串（通过浏览器检查您的代码以了解我的意思）。

在这种情况下，您的模板代码应该是：

console.log("{{ someResponse }}");
var x = JSON.parse("{{ someResponse }}");
...

【讨论】：

谢谢。但是，如果 index.html 脚本如下所示，我怎样才能让它显示在 index.html 上的表 JQuery 表元素中： .....所有脚本引用已被省略评论目的.....所有样式引用都被省略了评论目的
您可以将您的 JS 文件分开，只需将 var x 声明放在 html 页面上的 <script> 标记内。只要确保它在对表 js 文件的引用之前。

【解决方案2】：

在 html 文件中编写 js 代码：

<script>
$(document).ready(function(){
    //Convert response dataframe to variable
    console.log("{{ someResponse }}");
    var x = JSON.parse("{{ someResponse }}");
    //print response dataframe
    console.log(x);
    .......

</script>

您将无法将此变量从后端传递到 javascript 文件。

【讨论】：

这是否意味着我必须取出另一个 Javascript 文件？