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 JS定时器制作实时时间计数器
  • ¥25 matlab无法将表达式转换为双数组怎么解决?
  • ¥15 单片机汇编语言相关程序
  • ¥20 家用射频美容仪技术规格
  • ¥15 大家帮我看看为什么错了
  • ¥15 unity互动琴弦抖动效果
  • ¥15 做了个的二极管反向饱和电流测量电路,但是测试达不到效果
  • ¥15 nginx无证书访问https失败
  • ¥15 树莓派启动AP热点传入数据
  • ¥15 multisim中关于74ls192n和DSWPK开关的问题(相关搜索:计数器)