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

Question

I'm used to writing ruby where I get data, then I manipulate it, then I display it.

In javascript land, I'm getting some json, on success: manipulate and display.

I want to separate out my code to look like this

 $("#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

You should probably get used to event-based programming. Your code could use callbacks:

$("#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

Hard to tell what your question is, but success is any function, so this:

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

Can be equivalently written as:

...
success: upDateUi,
...

Other than that, not sure what you mean by "I don't want to manipulate the ui in this code".

Answer 3

Define a callback, and then in the success method invoke the callback:

$("#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

The only way to do that is to use a synchronous fetch, which waits for the response, but its a bad idea, as no other javascript can run (and in some browsers - nothing can run) until the response is received.

If you really, really, really want it though:

$("#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

I'm not shure if is this what you want.

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

You can separate the logic that updates the UI from the logic that retrieves the data from the server using a callback pattern :

$("#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);
        }
    })
}

For more information on functions and scopes:

https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope

For more information on how I defined the upDateUi function:

https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope#Recursion

Answer 7

This code might be good for your needs:

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

Then you just proceed with whatever you want to do with the results.

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