jQuery 自动完成嵌套 Ajax 调用

Posted 2023-04-15

【中文标题】jQuery 自动完成嵌套 Ajax 调用

【英文标题】：jQuery Autocomplete Nested Ajax Calls

【发布时间】：2014-05-20 10:07:04

【问题描述】：

我目前正在使用 Spotify 元数据 API 实现专辑搜索自动完成功能。我已经完成了大部分功能，但是在进行嵌套调用以检索专辑封面时遇到了麻烦。我相信这是我问题的根源。当我执行 ajax 调用来检索图像时，它确实有效，并且我得到了正确的数据，但返回语句没有被执行。我要做的是获取前四个结果，每个结果都获取一个图像并返回标签、项目和图像。

 $('#spotify-album-search').autocomplete(
      source:
        function (query, process) 
          $.when(
            $.ajax(
                url: 'http://ws.spotify.com/search/1/album.json?q=' + query.term,
            )
          ).then(function (data) 
            process($.map(data.albums.slice(0, 4), function(item) 
              $.when (
                $.ajax(
                    url: 'https://embed.spotify.com/oembed/?url=' + item.href,
                    dataType: 'jsonp'
                )
              ).then(function (image) 
                // Input: The Rolling Stones
                console.log(item.artists[0].name + ' - ' + item.name + ': ' + image.thumbnail_url);
                // Console: The Rolling Stones - Let It Bleed: https://d3rt1990lpmkn.cloudfront.net/cover/91205a1c80960d7055f8ed1bbe022f195e1767a4
                return  label: item.artists[0].name + ' - ' + item.name, album: item, image: image.thumbnail_url ;
              );
            ));
          );
      ,
      select: function (e, ui) 
        console.log("selected= " + ui.item.album);
      ,
      messages: 
        noResults: '',
        results: function() 
      
    )
    .data('ui-autocomplete')._renderItem = function(ul, item) 
      return $('<li></li>')
          .data( "ui-autocomplete-item", item)
          .append('<a>' + item.label + '<img src="' + item.image + '"  />' + '</a>')
          .appendTo(ul);
    ;

编辑：

在这里你可以找到一个工作小提琴，如果你相信可以帮助！ http://jsfiddle.net/9GbkL/

【问题讨论】：

第一个 Ajax 没有指定 JSONP。

我不认为这是问题所在！添加该行将中断请求。试试小提琴，你会看到的。谢谢！

【参考方案1】：

在异步编程中，return 仅用于强制退出。你实际上不能返回数据....

在异步编程中使用数据的唯一方法是将其发送到函数。

因此，您需要一个可以根据数据更新 UI 的函数...

在当前使用数据完成 console.log 测试的地方添加此功能。

【讨论】：

感谢您的反馈，保罗。你能更具体一点吗？我应该声明一个函数并将其作为参数传递'item'和'image'并直接更新视图吗？然后会调用这个函数而不是返回，对吧？

这是正确的想法。重要的是要尊重代码中数据定义明确的位置，并从那里使用数据，这可以包括将其传递给函数。

异步编程中回调的返回值通常是无关紧要的。有时你会看到 return console.log(error);因为 return 结束在函数中执行.... 就像一个 if

谢谢！我会努力做到这一点！

【参考方案2】：

感谢 jQuery 论坛上 Godsbest 的帮助，我得以完成这项工作。 Paul 是对的，我需要函数调用而不是 return 语句。如果有人像我一样遇到问题，这里有一个使用 Bootstrap 3 和 Spotify 元数据 API 的自动完成功能：

JS：

$('#spotify-album-search').autocomplete(
      source:
        function (query, process) 
          $.when(
            $.ajax(
                url: 'http://ws.spotify.com/search/1/album.json?q=' + query.term,
            )
          ).then(function (data) 
            var process_data = [];
            $.each(data.albums.slice(0, 4), function(i,item) 
              $.when (
               $.ajax(
                  url: 'https://embed.spotify.com/oembed/?url=' + item.href,
                  dataType: 'jsonp'
               )
              ).then(function (image) 
                process_data.push(  artist: item.artists[0].name, album_name: item.name, label: item.artists[0].name + ' - ' + item.name, album: item, href: item.href, image: image.thumbnail_url.replace("cover", "60") );
                process( process_data );
              );
            );
          );
      ,
      open: function(event, ui) 

      ,
      select: function (e, ui) 
        e.preventDefault();
        $('#spotify-id').val(ui.item.album.href);
        $(this).val(ui.item.label);
      ,
      messages: 
        noResults: '',
        results: function() 
      
    )
    .data('ui-autocomplete')._renderItem = function(ul, item) 
      return $('<li>')
          .data( "ui-autocomplete-item", item)
          .append('<a>' + '<img  src="' + item.image + '"  />' + '<span class="ui-autocomplete-artist">' + item.artist  + '</span>' + '<span class="ui-autocomplete-divider"><i class="fa fa-minus"></i></span>' + '<span class="ui-autocomplete-album-name">' + item.album_name  + '</span>' + '<span class="ui-autocomplete-icon pull-right"><i class="fa fa-plus-circle fa-2x"></i></span>' + '</a>')
          .appendTo(ul);
    ;

http://jsfiddle.net/9GbkL/5/ 。编码愉快！

【讨论】：

很高兴你能成功。在这里接受你自己的答案是完全可以接受的。