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 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题