当ajax调用完成时，如何确保代码运行？

Question

我习惯在获取数据的地方编写红宝石，然后操纵它，然后显示它。

在javascript领域，我得到了一些成功的json：操纵和显示。

我想把我的代码看起来像这样

 $("#uiElement").click(function(){
    data = getData();
    upDateUi(data);
})

function getData(){
    var fishes;
    $.ajax({
        url: '/api/fishes/'+q,
        dataType: 'json',
        success: function(data){
            return data;
            //I don't want to manipulate the ui in this code;
            //upDateUi(data)
        },
        error: function(req,error){
            console.log(error);
        }
    })
    return fishes;
}

Answer 1

您可能应该习惯于基于事件的编程。 您的代码可以使用回调：

$("#uiElement").click(function(){
    getData(upDateUi); // make sure upDateUi is defined, it will be passed data
})

function getData(callback){
    var fishes;
    $.ajax({
        url: '/api/fishes/'+q,
        dataType: 'json',
        success: function(data){
            //I don't want to manipulate the ui in this code;
            //upDateUi(data)
            callback(data);
        },
        error: function(req,error){
            console.log(error);
        }
    })
    return fishes;
}

Answer 2

很难说出您的问题是什么，但是success是任何功能，因此：

...
success: function(data){
    upDateUi(data);
},
...

可以等效地写为：

...
success: upDateUi,
...

除此之外，不确定“我不想在此代码中操作ui”的含义。

Answer 3

定义一个回调，然后在成功方法中调用该回调：

$("#uiElement").click(function(){
    data = getData(upDateUi);
})

function getData(callback) {
    $.ajax({
        url: '/api/fishes/'+q,
        dataType: 'json',
        success: function(data){
            if (callback !== undefined) {
               callback(data);
            }
        },
        error: function(req,error){
            console.log(error);
        }
    })
}

Answer 4

唯一的方法是使用同步获取，它等待响应，但这是一个坏主意，因为在收到响应之前，其他JavaScript都无法运行（在某些浏览器中无法运行）。

但是，如果您真的，真的，真的想要它：

$("#uiElement").click(function(){
    data = getData();
    upDateUi(data);
})

function getData(){
    var fishes;
    $.ajax({
        url: '/api/fishes/'+q,
        dataType: 'json',
        async: false,
        success: function(data){
            fishes = data;
        },
        error: function(req,error){
            console.log(error);
        }
    })
    return fishes;
}

Answer 5

我不确定这是否是您想要的。

successFunction(data){
    //you can do everything here
}
errorFunction(req,error){
    console.log(error);
}
function getData(){
    var fishes;
        $.ajax({
            url: '/api/fishes/'+q,
            dataType: 'json',
            success: successFunction,
            error: errorFunction
        })
        return fishes;
    }

Answer 6

您可以使用callback pattern将更新UI的逻辑与从服务器检索数据的逻辑分开：

$("#uiElement").click(function(){
        var upDateUi = function(data) {
            /* ... logic ... */
        };

        getData(upDateUi);
})

function getData(callback){
    $.ajax({
        url: '/api/fishes/'+q,
        dataType: 'json',
        success: function(data){
            callback(data);
        },
        error: function(req,error){
            console.log(error);
        }
    })
}

有关功能和范围的更多信息：

https://developer.mozilla.org/zh-CN/JavaScript/Reference/Functions_and_function_scope

有关如何定义upDateUi函数的更多信息：

https://developer.mozilla.org/zh-CN/JavaScript/Reference/Functions_and_function_scope#Recursion

Answer 7

此代码可能符合您的需求：

var myData = $.parseJSON($.ajax({
    url: "./somewhere",
    type: 'get|post',
    async: false,
    data: { what: "ever" }
}).responseText);

然后，您可以继续进行结果处理。

 $("#uiElement").click(function(){
    var myData = $.parseJSON($.ajax({
        url: "./somewhere",
        type: 'get|post',
        async: false,
        data: { what: "ever" }
    }).responseText);
    upDateUi(myData);
})