javascript - 从 Python (Flask) 传递到 JavaScript 的 JSON 显示在屏幕上

Question

我将一个 JSON 从 Python 后端传递到我运行 webGL (three.js) 动画的前端 JavaScript。 JSON 包含确定动画中发生的事情的数值。我的问题是，虽然我有一个基本的 ajax 请求在工作，但 JSON 被打印到屏幕上(代替动画)而不是成为一个我可以循环访问以控制动画各个方面的变量。调用的两部分如下所示。

我问了一个related question在此之前得到了一些很大的帮助，但显然我仍然缺少一 block 拼图。我一直在阅读文档和各种资源，但需要朝着正确的方向插入才能最终实现这一目标。感谢您的帮助!

在 python 后端:

from flask import Response, json, render_template, jsonify
from app import app
from motifs import get_motif, get_motif_list

@app.route('/')
def index():
    motifs = get_motif_list(10)
#     The first version of the return below successfully sends data, yet it is printed to the 
#     screen, rather than being stored as data in a variable.
    return Response(json.dumps(motifs), mimetype='application/json')
#     This version of the return does not work:
#     return render_template("index.html", motifs = motifs) 

在 JavaScript 中(注意 console.log 完整性检查不起作用 - 我不知道为什么:

function foo() {
    var array_data;

    $.ajax({
        type: "GET",
        url: "/",
        dataType: "json"
    });

    request.done(function(JSON_array) {
        array_data = JSON.parse(JSON_array)["array"]
        console.log(array_data); // sanity check - doesn't work
    });
    return array_data;
};

var array = foo();
console.log(array); // sanity check - doesn't work

更新

在以下建议的帮助下，我已经非常接近实现这一目标了。 JSON 不再打印到屏幕(由 Flask 返回引起的问题)，我已经解决了 multifunction callback issue我一路上发现。但是，我现在从 complete textStatus 得到一个 parsererror。我认为现在的问题出在 Python/Flask 上(请参阅下面的当前代码)。再次感谢所有帮助过的人!

Python/Flask(我认为问题出在这里——我是 Flask 的菜鸟):

from flask import Response, json, render_template, jsonify
from app import app
from motifs import get_motif, get_motif_list

@app.route('/')
def index():
    motifs = get_motif_list(10)
    return Response(json.dumps(motifs), mimetype='application/json')

@app.route("/")
def index():
     return render_template("index.html")

JavaScript(数据由 Deferred 对象返回 - 用于解决回调问题):

function getData() {

    var deferredData = new jQuery.Deferred();

    $.ajax({
        type: "GET",
        url: "/",
        dataType: "json",
        success: deferredData.resolve(),
        complete : function(xhr, textStatus) {
            console.log("AJAX REquest complete -> ", xhr, " -> ", textStatus)}
    });

    return deferredData; // contains the passed data
};

Answer 1

事实证明我上面的代码有很多问题，其中有几个问题我不得不在相关问题中调试here和 here .

其中有:

• 在我原来的 Flask index() 函数中，它会将 JSON 数据转储到屏幕上，因为我没有在任何地方渲染 index.html 模板。
• 我在 Flask 函数中有匹配的路由('/')和函数名称(index())
• 如评论中所述，我使用 dataType: json 和 array_data = JSON.parse(JSON_array) 对 JSON 进行了不必要的双重解析
• 这个异步函数的返回总是未定义的，因为它在调用解决之前被引用
• 在我后来对 Deferred 对象的更新中，success 属性应该是:success: function(data) { deferredData.resolve(data);}<

所以，在所有这些修复之后，这里是功能代码!

flask /Python:

from flask import Response, json, render_template, jsonify
from app import app
from motifs import get_motif, get_motif_list

@app.route('/ajax')
def ajax() :
    motifs = get_motif_list(10)
    return Response(json.dumps(motifs), mimetype='application/json')

@app.route("/")
def index():
     return render_template("index.html")

JavaScript:(注意:这是我上面问题中的 foo() 函数)

function getData() {

    var deferredData = new jQuery.Deferred();

    $.ajax({
        type: "GET",
        url: "/ajax",
        dataType: "json",
        success: function(data) { 
            deferredData.resolve(data);
            },
        complete: function(xhr, textStatus) {
            console.log("AJAX Request complete -> ", xhr, " -> ", textStatus);
            }
    });

    return deferredData; // contains the passed data
};


// I used the Deferred structure below because I later added Deferred objects from other asynchronous functions to the `.when`

var dataDeferred = getData();

$.when( dataDeferred  ).done( function( data ) {
    console.log("The data is: " + data);    
});