执行双AJAX调用

时间：2017-12-02 17:56:03

标签： javascript jquery ajax

我已经开始了我的第一个AJAX项目，我正在尝试编写双AJAX函数，其中第一个函数的输出字符串（“ venue_ID ”）被第二个AJAX函数用于输出string（img_Url）。但我没有取得任何成功。我对以下代码的任何建议都表示赞赏; 

$(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>

2 个答案:

答案 0 :(得分：0)

您的代码无法正常工作：

  1. 变量 venue_id 是在Ajax回调函数的范围内定义的，它在函数外部未定义
  2. Ajax调用是异步执行的，即在从Ajax调用返回场地ID之前立即执行$.ajax语句之后的代码。

    3. 有很多方法可以解决这个问题以及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 :(得分：0)

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

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

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

    b /如果您决定使用jQuery，则需要在第一个AJAX中调用第二个AJAX调用，这是在第一个AJAX成功调用之后的指令内。这种结构称为“嵌套”。

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

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