Flask 中未定义的 Deferred AJAX 请求结果

Question

我刚接触Flask和AJAX，现在遇到的挑战是，当我向服务器发送AJAX请求时，结果是undefined。我正在使用延迟对象来跟踪几个异步请求，除了下面显示的AJAX函数，其他两个都正常工作。代码中可能出问题的地方用 >>>> 标记了

为了提供一些背景信息，我正在为浏览器中的一个单页动画编写后端代码。无论观众的点击请求还是动画自己程序化发出的数据请求（定期添加和删除视觉材料），模板始终保持不变。

Flask/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代码可能有个bug（或者是概念上的误解），因为请求返回的是我的html模板的完整文本，而不是我的JSON数据。有什么想法吗？

更新 2

根据@Jason P的建议，我在Flask中更改了路由URL和AJAX请求到一个备用路由：/ajax，以避免与模板渲染发生潜在的冲突。然而，请求仍然返回我的html模板的完整文本。也许我还需要区分Python/Flask的函数名称？...我下次会尝试这个。更新的代码在下面。

Python/Flask:

@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的评论，调用终于解决并正常工作了。呼！这是最终的代码：

Flask/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...

谢谢！

模板渲染 ajax json 前端开发 flask 单页应用路由异步请求

Flask 中未定义的 Deferred AJAX 请求结果

1 个回答

撰写回答