执行双AJAX调用

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

您的代码不适合，原因有二：

  1. 变量venue_id在Ajax回调函数的范围定义，它是外部不确定函数

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

回答：

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

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

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

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

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

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

以上是 执行双AJAX调用 的全部内容， 来源链接： utcz.com/qa/257579.html

回到顶部