在另一個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

，我們可以得到每個用戶的熱門曲目。

我跑中，一旦我拉出來的用戶名，我需要把它保存爲一個變量，然後將其插入裏面上獲得toptoptracks「&用戶= 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);    
    } 
}); 

是我迄今爲止（也一個toptracks，現在上築巢他們讀了），但我不知道如何讓自己的用戶名和它存儲爲一個變量頂端內部使用跟蹤（每個JS都做什麼？）。

Answer 1

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的方式是壞含&用戶名會混淆服務器，可能給惡意用戶發送的命令太多的控制你應該URI逃生user。）

如果每個用戶只有一個處理程序，此方法可行。例如，如果每個朋友都有一部分頁面，則可以根據其結果進行更新。但是，如果您有一個要在之後運行的功能，則會收到所有數據，這會變得更棘手。在這種情況下，您應該學會使用諸如async或Q之類的庫。雖然我不確定異步是否可用於客戶端JavaScript。

Answer 2

如果我理解正確的問題，這樣的事情可能會幫助你開始：

// 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其接受用戶PARAM並用來爲您生成特定端點。