weixin_33690963 2017-12-02 17:56 采纳率: 0%
浏览 18

执行两次AJAX通话

I've started on my first AJAX project and i am attempting to write double AJAX function where the output string ("venue_ID") of the first function is used by second AJAX function to output a string (img_Url). But I haven't had any success. Any suggestion for my code below would be much appreciated;

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

</div>
  • 写回答

2条回答 默认 最新

  • weixin_33695450 2017-12-02 18:10
    关注

    Your code doesn't work for two reasons:

    1. The variable venue_id is defined in the scope of the Ajax callback function, it is undefined outside of the function
    2. The Ajax call is executed asynchronously, i.e. the code after the $.ajax statement is executed immediately, before the venue ID has been returned from the Ajax call.

    There are various ways to tackle this and plenty of related questions on Stack Overflow. The easiest fix in your case would be to move the second Ajax call inside the first Ajax call's callback function, like this:

    $(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);
                }
            });
        }
    });
});
    评论

报告相同问题？

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥15 (关键词-阻抗匹配，HFSS，RFID标签天线)
  • ¥15 机器人轨迹规划相关问题
  • ¥15 word样式右侧翻页键消失