執行雙AJAX調用

-1

我已經開始了我的第一個AJAX項目，並且我正在嘗試編寫雙AJAX函數，其中第一個函數的輸出字符串（「venue_ID」）被第二個AJAX函數用於輸出字符串（img_Url）。但我沒有取得任何成功。對於我的代碼下面的任何建議將不勝感激;執行雙AJAX調用

$(function(){ 
 
var api_url = 'https://api.foursquare.com/v2/venues/search?ll=4.89996,114.928457&client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016&query=bake+culture'; 
 
var $info = $('#info'); 
 

 
$.ajax({ 
 
    type: 'GET', 
 
    url: api_url, 
 
    data: {format: 'json'}, 
 
    dataType: 'json', 
 
    success: function (info) { 
 
     var response = info.response.venues[0]; 
 
     var venue_id = response.id; 
 
     console.log('success', info); 
 

 
     $info.append(venue_id); 
 
     var $pic = $('#pic'); 
 

 
     var baseUrl = 'https://api.foursquare.com/v2/venues/'; 
 
     var fsParam = '/?client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016'; 
 
     var picUrl = baseUrl + venue_id + fsParam; 
 

 
     $.ajax({ 
 
      type: 'GET', 
 
      url: picUrl, 
 
      data: {format: 'json'}, 
 
      dataType: 'json', 
 
      success: function (pic) { 
 
       var venue_data = pic.response.venue; 
 
       var img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix; 
 
       console.log('success', pic); 
 

 
       $pic.append(img_url); 
 
      } 
 
     }); 
 
    } 
 
}); 
 
});

<html lang='en'> 
 
    <head> 
 
    <title>AJAX Demo</title> 
 
    </head> 
 
    <body> 
 
    <div> 
 
     <h4>AJAX Demo</h4> 
 
     <div id="info"></div> <!-- To test 1st AJAX output --> 
 
     <div id="pic"></div> 
 
    </div> 
 
    <div><img src="pic"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="js/source.js"></script> 
 
</body> 
 
</html>

來源

2017-12-02 G.Goh

'var venue_id'只在回調中定義，所以它不能在外面訪問。但即使你解決了這個問題，它仍然無法工作，因爲Ajax請求是異步的。 –

[爲什麼我的變量在函數內部修改後沒有改變？ - 異步代碼引用]（https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron） –

可能的重複[如何在.then（）鏈中訪問先前的承諾結果？]（https://stackoverflow.com/questions/28250680/how-do-i-access-previous-promise-results-in-a-then-鏈） –

您的代碼不適合，原因有二：

變量venue_id在Ajax回調函數的範圍定義，它是外部不確定函數
Ajax調用異步執行，即執行$.ajax語句後的代碼被執行立即在Ajax調用返回場所ID之前。

有很多方法可以解決這個問題，並且有很多關於Stack Overflow的相關問題。你的情況，最簡單的解決將是移動第二Ajax調用內第一個Ajax調用的回調函數，就像這樣：

$(function(){ 
    var api_url = 'https://api.foursquare.com/v2/venues/search?ll=4.89996,114.928457&client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016&query=bake+culture'; 
    var $info = $('#info'); 

    $.ajax({ 
     type: 'GET', 
     url: api_url, 
     data: {format: 'json'}, 
     dataType: 'json', 
     success: function (info) { 
      var response = info.response.venues[0]; 
      var venue_id = response.id; 
      console.log('success', info); 

      $info.append(venue_id); 
      var $pic = $('#pic'); 

      var baseUrl = 'https://api.foursquare.com/v2/venues/'; 
      var fsParam = '/?client_id=DKVNHNM2I15Y0TF1RNAEF1FPQHJPCCUPHBMJKGFHXUQITWHC&client_secret=XLCPTHFDAVNTUUAOCMNDQLWAS4TXZOGAXV5A2L1AAK5QNJZS&v=20131016'; 
      var picUrl = baseUrl + venue_id + fsParam; 

      $.ajax({ 
       type: 'GET', 
       url: picUrl, 
       data: {format: 'json'}, 
       dataType: 'json', 
       success: function (pic) { 
        var venue_data = pic.response.venue; 
        var img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix; 
        console.log('success', pic); 

        $pic.append(img_url); 
       } 
      }); 
     } 
    }); 
});

來源

2017-12-02 18:10:24

謝謝！你的建議對我有用 –

有幾種方法來解決異步問題。

a/JS中的本地方式是嵌套回調函數調用。參考XMLHttpRequest()對象作爲參考，以及它們的onreadystatechange屬性。

一旦您更好地理解了JS中的本地API調用，您可以使用jQuery提供的快捷方式，承諾或async/wait。所有這些在Stack Overflow和其他網站都有詳細記錄。

b如果您決定使用jQuery，則需要在第一個AJAX調用中接下來的第二個AJAX調用，即在第一個AJAX調用成功後的指令中。這個結構被稱爲「嵌套」。

c最後，您可以使用async/wait提供的工具。

您的變量venue_id應該定義爲任何函數之外的全局變量，以便它可以在另一個函數中使用。但是如果你使用嵌套回調，你應該沒有問題，並且不需要全局變量。

來源

2017-12-02 18:33:19 edmond

謝謝特里斯坦。我已經谷歌搜索項目1和2。感謝@Patrick Hund，感謝嵌套函數。仍然試圖圍繞XMLHttpRequest（）包裝我的頭。也許我仍然在嘗試熟悉JS術語。幸運的是，我發現使用「var $ pic = $（'＃pic'）;」作爲HTML使用的全球聲明。但圖像輸出通過「

」變爲空白。是否因爲它不是格式不正確的格式？ –

執行雙AJAX調用

回答

相關問題