Question

我已经尝试过搜索这个但我找不到任何符合我面临的问题的答案。我最近开始玩JQuery，所以这一定是非常愚蠢的。

我有一个div（.movie）在整个页面中重复，每个都有一个特定的id（例如#titanic）

标题，年份和运行时的信息来自函数内的JSONP。所以，在每个div中我都调用了这样的函数，并定义了要搜索的电影。

<div class="movie" id="tt0050083">
  <script>
    id = tt0050083;
    getinfo();
  </script>
  <p class="title"></p>
  <p class="year"></p>
  <p class="runtime"></p>
</div>

问题是，它确实只将标题，年份和运行时附加到最后一个div，而不是全部。它获取不同电影的所有不同信息，但所有内容都附加到最后一个div。

function getinfo(){
        $.ajax({
            url:"http://www.myapifilms.com/imdb?format=JSONP&idIMDB="+id,
            type:'GET',
            dataType:'JSONP',
            callback: 'callback',
            success: function(data, text, xhqr){
                $('#'+id).append( '<p class="title">' + data.title + '</p>' );
                $('#'+id).append( '<p class="year">' + data.year + '</p>' );
                $('#'+id).append( '<p class="runtime">' + data.runtime + '</p>' );
            }
        });
    }

唯一有效的ID被认为是我声明的最后一个ID，即使每次运行getinfo()时它都会搜索不同的电影，它只会附加到错误的位置。

打赌这是愚蠢的，但我现在已经敲打了几个小时谢谢！

Answer 1

您正在向电影api发出多个请求。这些是异步请求，成功回调在稍后执行（一旦api响应）。在进行下一个响应之前，您的代码不会等待每个响应返回。它继续并设置新的全局ID并发出新请求。执行成功回调时，全局“id”变量设置为对其进行的最后一次赋值。这就是为什么他们都被追加到最后一个div。

尝试将id传递给getInfo（），而不是设置全局变量。

例如，调用getInfo（）将如下所示：

id = 123;
getInfo(id);

getInfo（）的定义如下：

function getInfo(id) { 
..... 
}

Answer 2

我认为手动制作div有点低效。最好循环你的imdb id并创建动态填充正确数据的div。这是我刚刚创建的示例脚本。

jsfiddle demo

var ids = ["tt0068646","tt0111161","tt0108052"];

getMoviesByimdbID(ids);

function getMoviesByimdbID(ar){
    var mymovies=$('#moviecontainer');
    for(i = 0; i<ar.length; i++){
        $.ajax({
        url: 'http://www.myapifilms.com/imdb?format=JSONP&idIMDB='+ar[i],
        type: 'GET',
        dataType: 'JSONP'

        })
        .done(function(data) {
            console.log(data);
            var title= '<p class="title">'+data.title+'</p>';
            var year= '<p class="year">'+data.year+'</p>';
            var runtime= '<p class="runtime">'+data.runtime+'</p>';
            var urlPoster = '<img src="'+data.urlPoster+'">';
            mymovies.append('<div class="movie">'+title + year + runtime+urlPoster+'</div>');


        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });


    }

}

如何使用API从多个IMDB ID获取电影信息？

2 个答案:

如何使用API​​从多个IMDB ID获取电影信息？

2 个答案:

如何使用API从多个IMDB ID获取电影信息？