延迟向Flask发送的AJAX请求的未定义结果

Question

我是Flask和AJAX的新手，目前的挑战是，当我向服务器发出AJAX请求时，结果是undefined 。 我正在使用延迟对象来跟踪几个异步请求，并且除了下面显示的AJAX函数之外，所有其他请求都在工作。 另外两个是非AJAX。 以下代码中可能存在问题的区域标记有 >>>>

对于上下文，我将后端编写为浏览器中的一页动画。 无论来自查看器的任何请求（单击），还是动画以编程方式自行做出的任何数据请求（视觉材料的定期添加和减少），模板均保持不变。

瓶/ Python的：

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

# >>>> can/should I use two functions aimed at the same route? Not sure how to both render the template and pass data
@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 ：

function getData() {

    var deferredData = new jQuery.Deferred();

    $.ajax({
        type: "GET",
        url: "/",
        dataType: "json", // >>>> when I comment this out I get an error, when I leave it in I get a parsererror
        success: deferredData.resolve(),
        complete: function(xhr, textStatus) {
            console.log("AJAX REquest complete -> ", xhr, " -> ", textStatus);
            }
    });

    return deferredData; // contains the passed data >>>> currently undefined!!!
};


// DEFERRED OBJECTS
// used to perform a callback after multiple asynchronous functions
var deferredData = getData();
var deferredWindow = windowLoaded();
var deferredImages = loadImages();


// SINGLE CALLBACK AFTER MULTIPLE ASYNCHRONOUS FUNCTIONS
$.when( deferredWindow, deferredData, deferredImages  ).done( function( window, data, images ) {
    console.log("The window has loaded - " + window); // successful!
    console.log("The data are: " + data); // >>>> undefined!
    console.log("The images are: " + images); // successful!    
});

更新：

感谢@Jason P， getData AJAX调用中的success: function(data) { deferredData.resolve(data); }现在success: function(data) { deferredData.resolve(data); } success: function(data) { deferredData.resolve(data); } ，结果不再undefined ！ las，这也不是我的数据。 我认为我的Flask代码中可能存在错误（或概念上的误解），因为该请求返回的是HTML模板的完整文本，而不是JSON数据。 思考？

更新2

还有@Jason P的建议，我将Flask中的路由URL和AJAX请求更改为另一种路由： /ajax以避免与模板渲染潜在的冲突。 但是，请求仍返回我的html模板的全文。 也许我还需要区分python / flask函数名称？ ...将在下一个尝试。 更新了下面的代码。

的Python /瓶：

@app.route('/ajax')
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 AJAX url属性更改为： url: '/ajax'

更新3

我区分了python / flask函数名称，因此/ajax route函数现在称为ajax() ，而根路由'/'函数仍称为index() 。 JSON对象现在呈现到屏幕（而不是作为变量传递），而javascript呈现中什么都没有（大概现在缺少模板呈现？）

解决

在@Jason P发表评论之后，该调用终于解决并开始工作。 Wheew！ 这是最终代码：

瓶/ Python的

from flask import Response, json, render_template
from app import app
from motifs import 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的：

function getData() {

    var deferredData = new jQuery.Deferred();

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

    return deferredData; // contains the passed data
};

// all else in the script remains the same as above...

谢谢！

Answer 1

这行：

success: deferredData.resolve()

立即执行resolve() 。

尝试以下方法：

success: function(data) { deferredData.resolve(data); }