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 网络科学导论，网络控制
  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派，无法执行update，如何解决？（相关搜索：软件下载）