當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);
})