如何以非Ajax方式使用jQuery（或Javascript）从API调用获取JSON结果？

Question

I am new to JS an jQuery. And I am trying to build a key-value map from an API call which returns an array of key-value pairs.

[{"key":"191","value":244}, ... , {"key":"920","value":130}]

I came up with this ajax code. But following code will need the map constructed from loadMap. How to change it to non-ajax way that the "followingFunction" runs after loadMap finishes>

var mp = {};
(function loadMap() {
    $.ajax({
        type: 'GET',
        url:'http://localhost:8080/xxx/api?start_date=2014-10-01&end_date=2014-11-01',
        dataType: "json",
        success: function(arr){
            var out = "";
            for(i = 0; i<arr.length; i++) {
                mp[arr[i].key] = arr[i].value;
            }
        }
    }); 
}());

//followingFunction which needs the information from mp

Answer 1

You can solve this in two different ways.

1) Execute followingFunction at the end of your success callback:

var mp = {};
function loadMap() {
    $.ajax({
        type: 'GET',
        url:'http://localhost:8080/xxx/api?start_date=2014-10-01&end_date=2014-11-01',
        dataType: "json",
        success: function(arr){
            var out = "";
            for(i = 0; i<arr.length; i++) {
                mp[arr[i].key] = arr[i].value;
            }
            followingFunction();
        }
    });
};
loadMap();

2) Set the async flag to false (by default this flag is true ). This will result in blocking call with synchronous execution:

var mp = {};
function loadMap() {
    $.ajax({
        type: 'GET',
        url:'http://localhost:8080/xxx/api?start_date=2014-10-01&end_date=2014-11-01',
        dataType: "json",
        async: false,
        success: function(arr){
            var out = "";
            for(i = 0; i<arr.length; i++) {
                mp[arr[i].key] = arr[i].value;
            }
        }
    });
};
loadMap();
followingFunction();