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

我们可以为每位用户获取最佳曲目。

我遇到的主要问题是，一旦我拿出用户名，我需要将其存储为变量，然后将其插入＆＃39;＆amp; user = rj＆amp;＆＃39 ;获得toptoptracks，以便能够拉动每个用户的最佳曲目。

$.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);            
    }
});

是我到目前为止（也是一个用于toptracks，现在阅读嵌套它们），但我不确定如何获取他们的用户名并将其存储为在顶部轨道内使用的变量（。为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({ ... });之后放置的任何代码都会立即运行。如果您希望在收到响应后运行某些内容，则必须将其放在成功处理程序中。像这样：

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 {{1 }}。）

如果您只为每个用户使用一个处理程序，则此方法有效。例如，如果每个朋友都有一个页面的一部分，您可以在结果进入时更新每个部分。但是如果您有一个功能要在收到所有数据后运行，那么变得有点棘手。在这种情况下，您可能应该学习使用async或Q等库。虽然我不确定async是否可用于客户端javascript。

在另一个中使用来自一个ajax请求的数据

2 个答案: