Question

我习惯于在获取数据时编写ruby，然后操纵它，然后显示它。

在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

定义一个回调，然后在success方法中调用回调：

$("#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/en/JavaScript/Reference/Functions_and_function_scope

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

https://developer.mozilla.org/en/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);
})

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

7 个答案: