执行双AJAX调用

问题描述：

我已经开始了我的第一个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>

'var venue_id'只在回调中定义，所以它不能在外面访问。但即使你解决了这个问题，它仍然无法工作，因为Ajax请求是异步的。 –

[为什么我的变量在函数内部修改后没有改变？ - 异步代码引用]（https://*.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron） –

可能的重复[如何在.then（）链中访问先前的承诺结果？]（https://*.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); 
       } 
      }); 
     } 
    }); 
});

谢谢！你的建议对我有用 –

答

有几种方法来解决异步问题。

a/JS中的本地方式是嵌套回调函数调用。参考XMLHttpRequest()对象作为参考，以及它们的onreadystatechange属性。

一旦您更好地理解了JS中的本地API调用，您可以使用jQuery提供的快捷方式，承诺或async/wait。所有这些在Stack Overflow和其他网站都有详细记录。

b如果您决定使用jQuery，则需要在第一个AJAX调用中接下来的第二个AJAX调用，即在第一个AJAX调用成功后的指令中。这个结构被称为“嵌套”。

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

您的变量venue_id应该定义为任何函数之外的全局变量，以便它可以在另一个函数中使用。但是如果你使用嵌套回调，你应该没有问题，并且不需要全局变量。

谢谢特里斯坦。我已经谷歌搜索项目1和2。感谢@Patrick Hund，感谢嵌套函数。仍然试图围绕XMLHttpRequest（）包装我的头。也许我仍然在尝试熟悉JS术语。幸运的是，我发现使用“var $ pic = $（'＃pic'）;”作为HTML使用的全球声明。但图像输出通过“

”变为空白。是否因为它不是格式不正确的格式？ –

执行双AJAX调用

相关推荐