堆栈内存溢出
  繁体   English   中英

使用Flask将JSON数据从服务器传递到客户端

[英]Passing JSON data from server to client with Flask

 原文  2016-12-28 23:37:16  5   2    python/ json/ d3.js/ flask

问题描述

我对Flask完全不熟悉，并试图弄清楚如何使用d3js强制布局显示networkx图形数据。 这是相关的Python代码： 

@app.route("/")
def index():
    """
    When you request the root path, you'll get the index.html template.

    """
    return flask.render_template("index.html")


@app.route("/thread")
def get_graph_data(thread_id: int=3532967):
    """
    returns json of a network graph for the specified thread
    :param thread_id:
    :return:
    """
    pqdict, userdict = graphs.get_post_quote_dict(thread_id)
    G = graphs.create_graph(pqdict)
    s = graphs.graph_to_node_link(G, remove_singlets=True) # returns dict
    return flask.jsonify(s)

这是index.html文件： 

<!DOCTYPE html>
<html>
<head>
    <title>Index thing</title>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <link type="text/css" rel="stylesheet" href="templates/graph.css"/>
</head>
<body>
<div id="chart"></div>
<script>
    var w = 1500,
        h = 1500,
        fill = d3.scale.category20();

    var vis = d3.select("#chart")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    d3.json("/thread", function (json) {
        var force = d3.layout.force()
            .charge(-120)
            .linkDistance(30)
            .nodes(json.nodes)
            .links(json.links)
            .size([w, h])
            .start();

        var link = vis.selectAll("line.link")
            .data(json.links)
            .enter().append("svg:line")
            .attr("class", "link")
            .style("stroke-width", function (d) {
                return Math.sqrt(d.value);
            })
            .attr("x1", function (d) {
                return d.source.x;
            })
            .attr("y1", function (d) {
                return d.source.y;
            })
            .attr("x2", function (d) {
                return d.target.x;
            })
            .attr("y2", function (d) {
                return d.target.y;
            });

        var node = vis.selectAll("circle.node")
            .data(json.nodes)
            .enter().append("svg:circle")
            .attr("class", "node")
            .attr("cx", function (d) {
                return d.x;
            })
            .attr("cy", function (d) {
                return d.y;
            })
            .attr("r", 5)
            .style("fill", function (d) {
                return fill(d.group);
            })
            .call(force.drag);

        vis.style("opacity", 1e-6)
            .transition()
            .duration(1000)
            .style("opacity", 1);

        force.on("tick", function () {
            link.attr("x1", function (d) {
                return d.source.x;
            })
                .attr("y1", function (d) {
                    return d.source.y;
                })
                .attr("x2", function (d) {
                    return d.target.x;
                })
                .attr("y2", function (d) {
                    return d.target.y;
                });

            node.attr("cx", function (d) {
                return d.x;
            })
                .attr("cy", function (d) {
                    return d.y;
                });
        });
    });
</script>
</body>
</html>

很明显，d3.json（）函数需要一个静态JSON文件的位置，在这种情况下，我正在尝试根据请求URL动态生成。

我试过了十几种我在这里找到的方法。 根据下面的建议，我试过： 

@app.route("/")
def index():
    """
    When you request the root path, you'll get the index.html template.

    """
    return flask.render_template("index.html")


@app.route("/thread")
def get_graph_data():

    """
    returns json of a network graph for the specified thread
    :param thread_id:
    :return:
    """
    thread_id = request.args.get("thread_id", 3532967, type=int)
    pqdict, userdict = graphs.get_post_quote_dict(thread_id)
    G = graphs.create_graph(pqdict)
    s = graphs.graph_to_node_link(G, remove_singlets=True)
    return jsonify(s)

模板index.html保持不变，并导航到“ http：// localhost / thread？thread_id = 12345 ”，但这失败了，因为它在页面上打印ID为12345的JSON而不是渲染javascript。

总而言之，我目前的目标是从URL中指定Python方法中的参数（“... / showgraph？threadid = whatever ...”），在Python代码中生成一个json，并将其传递给html / js。 我该如何做到这一点？

2 个解决方案

解决方案1
 6 已采纳  2016-12-28 23:51:50

你真的很亲密！

首先，语句：“显然d3.json（）函数想要一个静态JSON文件的位置”是不正确的。

d3.json（）是d3-request库的一部分，因此是一个XHR方法（例如，需要一个URL，它可以是一个静态JSON，如data.json ，但不是文字JSON数据）。

我会调整您的Flask路线以接受GET参数，因为该函数只会通过URL接受参数： 

@app.route("/thread")
def get_graph_data():
    thread_id = request.args.get("thread_id", 3532967, type=int)
    pqdict, userdict = graphs.get_post_quote_dict(thread_id)
    G = graphs.create_graph(pqdict)
    s = graphs.graph_to_node_link(G, remove_singlets=True) # returns dict
    return flask.jsonify(s)

我的意思是，如果你想使用你需要做的函数参数： 

@app.route("/thread/<int:thread_id>")
def get_graph_data(thread_id):
    ...

然后，调整您的XHR调用以发送GET参数： 

var url = "/thread?thread_id=" + id.toString();
d3.json(url, function (json) {
    var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .nodes(json.nodes)
        .links(json.links)
        .size([w, h])
        .start();

   // a bunch more js that i copied and pasted from a tutorial
});

它应该没问题。

另外，仅供参考，如果您想使用Jinja2将对象“读取”到Javascript对象中，则需要使用2个过滤器： {{ data|tojson|safe }}

解决方案2
 3  2016-12-29 01:43:00

解决方案是：

蟒蛇： 

@app.route("/thread")
def get_graph_data():

    """
    returns json of a network graph for the specified thread
    :param thread_id:
    :return:
    """
    thread_id = request.args.get("thread_id", 3532967, type=int)
    pqdict, userdict = graphs.get_post_quote_dict(thread_id)
    G = graphs.create_graph(pqdict)
    s = graphs.graph_to_node_link(G, remove_singlets=True)
    return json.dumps(s)


@app.route("/showgraph")
def showgraph():
    thread_id = request.args.get("thread_id", 3532967, type=int)
    return render_template("index.html", threadid=thread_id)

HTML / Jinja2的： 

<!DOCTYPE html>
<html>
<head>
    <title>Index thing</title>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <link type="text/css" rel="stylesheet" href="templates/graph.css"/>
</head>
<body>
<div id="chart"></div>
<script>
    var w = 1500,
        h = 1500,
        fill = d3.scale.category20();

    var vis = d3.select("#chart")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    d3.json("/thread?thread_id={{ threadid }}", function (json) {
        var force = d3.layout.force()
            .charge(-120)
            .linkDistance(30)
            .nodes(json.nodes)
            .links(json.links)
            .size([w, h])
            .start();

        // irrelevant stuff
    });
</script>
</body>
</html>

需要单独的方法来返回JSON并呈现页面。 仍然似乎很傻要解析thread_id arg两次但是无论如何。 接受PJ的答案，因为它是99％的问题！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将 JSON 数据从 Flask 传递到 JavaScript 将烧瓶中的数据传递到javascript时，JSON中出现意外令牌{ Flask Web 服务器从客户端获取数据，但无法保存 通过Websockets从Python Flask服务器向客户端持续发送数据 如何使用Flask在Python中将数据从服务器发送到客户端？ 无法使用Ajax将数据从客户端（JS）传递到服务器（Flask） 将数据从烧瓶传递到 HTML 将数据从javascript传递到Flask JQuery / Flask - 将数据从服务器发送到浏览器作为JSON 如何从 Flask 服务器中的 JSON 文件获取数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM