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); }，结果不再是undefined！唉，它也不是我的数据。我想我的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路由函数现在称为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); }

来自Flask的Deferred AJAX请求的未定义结果

1 个答案: