javascript - 无法将整个 JSON 对象返回给调用函数

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 7 年前。

我是 AJAX 新手，我需要找到一种方法将 AJAX JSON 响应返回到调用函数。有什么办法可以实现这一点吗？我的代码片段:

function requestAjaxWebService(webServiceName, method, jsonData) {
    var returnData;
    $.ajax({
        url: webServiceName,
        type: method,
        data : jsonData,
        dataType: "json",
        success: function (data) {
            returnData = data;
        },
        error: function(error){
            returnData = "Server error";
        }
    });
    return returnData;
}

Answer 1

jQuery.ajax() performs asynchronous HTTP request 。因此，您无法同步返回其响应(您的代码正在尝试这样做)。

如果请求成功，success(data, textStatus, jqXHR) 处理程序将在某个时刻被调用(您不知道何时)。

以下是修改代码的一种方法:

function requestAjaxWebService(webServiceName, method, jsonData, callback) {
    $.ajax({
        url: webServiceName,
        type: method,
        data : jsonData,
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
            callback(true, data); // some method that knows what to do with the data
        },
        error: function(jqXHR, textStatus, errorThrown){
            callback(false, errorThrown);
        }
    });
}

callback 应该是对如下方法的引用:

function onData(isSuccess, dataOrError)
{
    if (isSuccess) {
        // do something with data
    } else {
        console.error(dataOrError);
    }
}

更新如果由于某种原因在回调中需要设置对象:

function onData(isSuccess, settings, jqXHR, errorThrown)
{
    if (isSuccess) {
        // do something with the data:
        // jqXHR.responseText or jqXHR.responseXML
    } else {
        // do something with error data:
        // errorThrown, jqXHR.status, jqXHR.statusText, jqXHR.statusCode()
    }
}

function requestAjaxWebService(webServiceName, method, jsonData, callback) {
    var settings = {
        url: webServiceName,
        type: method,
        data : jsonData,
        dataType: "json"
    };
    settings.success = function(data, textStatus, jqXHR){
        callback(true, settings, jqXHR);
    };
    settings.error = function(jqXHR, textStatus, errorThrown){
        callback(false, settings, jqXHR, errorThrown);
    };
    $.ajax(settings);
}

requestAjaxWebService("name", "POST", "json", onData);

您还可以使用 jqxhr 对象的 .done() 和 .fail() 回调来代替 settings 对象中的回调，如 obiTheOne 的答案表明。它可能看起来更整洁，但实际上并不重要。