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

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 响应）。在做出下一个响应之前，您的代码不会等待对 return 的每个响应。它继续前进并设置新的全局 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 获取电影信息？

How to get movie info from multiple IMDB ids using an API?

html

javascript

css

jquery

append