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

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

本文关键字：ID 获取 电影 信息 IMDB 何使用 API      更新时间：2023-09-26

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

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

title、year和runtime的信息来自函数内部的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，而不是全部附加。它获取不同电影的所有不同信息，但所有信息都附加到最后一个分区。

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()时它都会搜索不同的电影，但它只是附加到了错误的位置。

我打赌这很愚蠢，但我已经撞了好几个小时了谢谢

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

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

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

id = 123;
getInfo(id);

getInfo（）的定义如下：

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

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

jsfiddle演示

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");
        });

    }
}
相关文章：