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

Question

我已尝试搜索此内容，但找不到任何适合我所面临问题的答案。 我最近开始玩 JQuery，所以这一定很愚蠢。

我有一个在整个页面中重复出现的 div (.movi​​e)，每个都有一个特定的 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 被认为是我声明的最后一个，即使它每次运行 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");
        });


    }

}