javascript - 如何使用 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>

问题是，它只是将标题、年份和运行时间 append 到最后一个 div，而不是全部。它获取不同电影的所有不同信息，但所有内容都 append 到最后一个 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() 时搜索不同的电影，它只是 append 到错误的位置。

打赌这很愚蠢，但我已经敲了好几个小时的脑袋了谢谢!

Answer 1

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

尝试将 id 传递给 getInfo() 而不是设置全局变量。

例如，调用 getInfo() 将如下所示:

id = 123;
getInfo(id);

getInfo() 的定义如下:

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