从jQuery.getJSON返回JSON Blob

Question

我有一个函数，在该函数中，我会调用一个MVC控制器，该控制器返回一个JSON Blob，其中包含一些后端操作的内容。 此JSON Blob用于填充呈现给最终用户的表。

我的函数当前看起来像这样：

function getJsonFromController(path) {
    var blob = null;

    $.getJSON(path, function (data) {
        blob = data;
        console.log('inside getjson : ' + blob);
    });

    console.log('outside getjson : ' + blob);
    return blob;
}

...以及如下调用动作：

$('#action-button').click(new function () {
    blob = getJsonFromController('A/B?pageId=1');

    console.log('in click event: ' + blob);
    $.tmpl($template, blob).appendTo($('#table-body'));
});

当我运行调用此代码的网页/操作时，会以给定的顺序获得以下结果：

outside getjson: null
in click event: null
inside getjson: [object Object] 

我尝试了其他一些配置（.getJSON（）的.complete，直接从$ .getJSON（）返回一个值）以尝试将回调中的“数据”回显到范围内的blob变量，但到目前为止， blob似乎仅在getJSON回调中具有值。

话虽如此，我也知道JavaScript是一种词法范围的语言，因此这可能与所有匿名函数链的执行有关。

问题：我可以看到我的blob在$ .getJSON内正确显示。 现在，我如何清除斑点？

Answer 1

AJAX请求是异步的。 您可以同步执行此操作（请注意，它将冻结您的网页，直到请求完成为止），但是最好做以下类似的操作：

function getJsonFromController(path) {
    var blob = null;

    $.getJSON(path, function (data) {
        blob = data;
        console.log('inside getjson : ' + blob);
        $.tmpl($template, blob).appendTo($('#table-body'));
    });
}

然后点击：

$('#action-button').click(new function () {
    blob = getJsonFromController('A/B?pageId=1');
});