时间戳

首页 > 解决方案 > Javascript 如何访问从 Python Flask 的 render_template() 函数发送的数据？

javascript - Javascript 如何访问从 Python Flask 的 render_template() 函数发送的数据？

问题描述

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

蟒蛇代码：

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。

提前致谢。

标签： javascriptpythonjsonflask

解决方案

在 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 文件。

推荐阅读