在另一个Ajax请求中使用数据

Question

我正在学习ruby，但与朋友一起工作的一个小项目需要一些JS / Jquery。 我们正在使用Last.fm api，并试图构建一个页面，在该页面中我们将从两个不同的URL调用Json数据。

http://ws.audioscrobbler.com/2.0/?method=user.getfriends&user=rj&api_key=3d7e6bb560deeb5d15af8176abf5c928&format=json

我们可以在其中提取朋友的用户名和一些有关他们的信息，以及

http://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=rj&period=7day&api_key=3d7e6bb560deeb5d15af8176abf5c928&format=json

在这里我们可以获得每个用户的热门曲目。

我遇到的主要问题是，一旦拔出用户名，我需要将其存储为变量，然后将其插入gettoptoptracks上的“＆user = rj＆”中，以便能够拉动每个用户的热门曲目。

$.ajax({
    type : 'POST',
    url : 'http://ws.audioscrobbler.com/2.0/?method=user.getfriends&user=rj&api_key=3d7e6bb560deeb5d15af8176abf5c928&format=json',
    dataType : 'json',
    success : function(data) {
        $('#success #f1').html(data.friends.user[0].name);
        $('#success #f2').html(data.friends.user[1].name);
        $('#success #f3').html(data.friends.user[2].name);
    },
    error : function(code, message){
        $('#error').html('Error Code: ' + code + ', Error Message: ' + message);            
    }
});

是到目前为止，我所拥有的（也可以用于toptrack，现在阅读将其嵌套），但是我不确定如何获取其用户名并将其存储为变量以供在top轨道内使用（.each对于JS都可以做到） ？）。

Answer 1

如果我正确理解了问题，则类似的方法可能会帮助您入门：

// at the top of your script create empty users var
var users = [];

// create a function that generates your endpoint url

var urlWithUser = function(user){
  return 'http://ws.audioscrobbler.com/2.0/?method=user.getfriends&user=' + user + '&api_key=3d7e6bb560deeb5d15af8176abf5c928&format=json'
};

// assign value to users
var getInitialData = function(){
    $.ajax({
        type : 'POST',
        url : 'http://ws.audioscrobbler.com/2.0/?method=user.getfriends&user=rj&api_key=3d7e6bb560deeb5d15af8176abf5c928&format=json',
        dataType : 'json',
        success : function(data) {
            users = data.friends.user;
            $.each(users, function(index, value){
                getUserData(this.name);
            };
        },
        error : function(code, message){
            $('#error').html('Error Code: ' + code + ', Error Message: ' + message);            
        }
    });
};

// create a function with your ajax call, which can be used to obtain specific user data
var getUserData  = function(user){
    $.ajax({
        type : 'POST',
        url : urlWithUser(user);
        dataType : 'json',
        success : function(data) {
            // do whatever you want
        },
        error : function(code, message){
            $('#error').html('Error Code: ' + code + ', Error Message: ' + message);            
        }
    });
};

// get first set of users
getInitialData();

注意urlWithUser接受用户参数，并用于为您生成特定的端点。

Answer 2

Javascript无法像Java之类的其他语言一样执行线程。 为了解决这个问题，它设置了处理程序-这些函数将在某些事件触发后稍后运行。 当您调用$.ajax({ ... }); ，javascript设置了处理程序，但立即继续运行。 成功处理程序要等到收到ajax响应之后再运行。 因此，任何放置在$.ajax({ ... });之后的代码$.ajax({ ... }); 将立即运行。 如果希望在收到响应后执行某些操作，则必须将其放入成功处理程序中。 像这样：

success: function(data) {
    var users = data.friends.user;
    $.each(users, function(i, user) {
        $.ajax({
            url: 'http://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=' + user + '&period=7day&api_key=3d7e6bb560deeb5d15af8176abf5c928&format=json',
            ...
            success: function(data) { ... },
            ...
        });
    });
},

（注意：我生成URL的方式是BAD。包含&的用户名会混淆服务器，可能使恶意用户对发送的命令有太多控制权。您应该URI-escape user 。）

如果每个用户只有一个处理程序，则此方法有效。 例如，如果每个朋友都有页面的一部分，则可以在输入结果时更新每个部分。但是，如果您有要在接收所有数据之后运行的功能，则它会变得有些棘手。 在那种情况下，您可能应该学习使用诸如async或Q之类的库。尽管我不确定async甚至可用于客户端javascript。