如何使用 jquery 对 api 进行 jsonp 调用

Question

我一般是编程新手，当我调用moviedb.org api 时，我无法将数据导入我的网络应用程序。我正在使用 jquery，我已经阅读了所有文档，甚至是食谱，我仍在努力完成这项工作，我还检查了我的谷歌开发工具控制台，它显示调用成功：

Status Code:200 OK
[{"id":550,"name":"Fight Club","posters":[{"image":{"type":"poster","size":"original","height":1000,"width":675,"url":"http://hwcdn.themoviedb.org/posters/f8e/4b........

这是我的代码：

<script>
   $.getJSON("http://api.themoviedb.org/2.1/Movie.getImages/en/json/ed7e2e092ca896037ce13d2bf11a08f1/550&callback=?",
    function(data){
      $.each(data, function(i,item){
         $("<img/>").attr("src", item.image).appendTo("#images");
      });
    });
 </script>

我想我搞砸了回调函数，任何想法都将不胜感激。 提前致谢！

Answer 1

简而言之，您要访问的服务器似乎不支持 JSONP，这是必须存在的服务器端功能......但不是。我在他们的 API 文档或论坛中也没有看到任何提及。 URL 应该是 ?callback=?，因为它是唯一的查询字符串参数，如下所示：

http://api.themoviedb.org/2.1/Movie.getImages/en/json/<apikey>/550&callback=?

...但这仍然行不通，因为服务器不支持它。顺便说一句：很多时候，带有 API 密钥的东西不会支持 JSONP（因为客户端将拥有密钥），如果 API 它使用密钥来限制访问......其他仅将其用于跟踪可能不在乎。

Answer 2

这个函数“post”调用服务器

$.post("http://api.themoviedb.org/2.1/Movie.getImages/en/json/ed7e2e092ca896037ce13d2bf11a08f1/550&callback=?", 
   function(data){ 
    //After the server code run, this code is executed with the 
    //information of the response into the parameter 'data'
    $.each(data, function(i,item){ 
    $("").attr("src", item.image).appendTo("#images");
    });
   }, 
 json");

如您所见，我放置了相同的“每个”迭代函数。我不知道您是否正确执行此操作，因为我不执行此代码。但我强烈建议您尝试使用 alert(...) 将代码执行到 function(data)... 中，如下所示：

$.post("http://api.themoviedb.org/2.1/Movie.getImages/en/json/ed7e2e092ca896037ce13d2bf11a08f1/550&callback=?", 
   function(data){
    alert(data);
   }, 
"json");

有了这个你真的知道什么是“数据”吗？

希望对你有所帮助。

Answer 3

首先，您必须确保您调用的 api 支持 jsonp（如果不支持，您将看到 json，但您将无法对其进行任何操作）。

第二。如果您不添加回调名称，那么您将保留 ?callback=?然后 jquery 将在您的 url 末尾添加一个随机数，并且很可能会导致问题。它看起来像这样：

http://someurl.com?callback=140989239

那只会伤害你。在标准 jsonp 中，您实际上将 json 插入到 <script> 标记中。为此，您需要执行以下操作：

var headID = document.getElementsByTagName('head')[0];
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.src = "enter your api url that you are calling here with a specified callback"
headID.appendChild(newScript);