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

Posted 2023-03-03

【中文标题】如何使用 jquery 对 api 进行 jsonp 调用

【英文标题】：How to make a jsonp call to an api using jquery

【发布时间】：2011-05-12 09:50:44

【问题描述】：

我一般是编程新手，当我调用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>

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

【问题讨论】：

API 的api.themoviedb.org/2.1 版本不支持JSONP。 Their docs says it is supported in the version 3 API:Unlike previous versions of the API, /3 only supports a single format, JSON. XML and YAML support are being officially dropped. This lets us focus on improving 1 single type and also increases our ability to reuse cached data. JSONP is also officially supported, just add a callback parameter and you’re done.

【参考方案1】：

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

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

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

【讨论】：

这是不正确的。 callback=? 实际上是由 jQuery 更改的，以用生成的函数名称替换 ?。尝试将? 替换为foobar，您将看到返回的有效数据：http://api.themoviedb.org/2.1/Movie.getImages/en/json/ed7e2e092ca896037ce13d2bf11a08f1/550&callback=foobar

@hippietrail - 不...答案仍然是正确的，您的网址返回的是不是 JSONP，它没有包含在foobar(<datahere>); 函数调用中，它只是JSON 数据。在说它错误之前测试它:) 我知道 jQuery 如何与 JSONP 参数一起工作......但如果你调用的服务器不支持 JSONP，那根本不相关，这就是为什么重点放在这个回答。

糟糕，API 密钥似乎不再有效，所以我无法检查）-:

@hippietrail - 您可以使用任何 API 密钥进行尝试，但事实仍然如此......该服务不支持 JSONP。由于您无法超越这一点，因此无需在此答案中详细说明 jQuery 的工作原理，因为无论您使用哪个客户端库，它都无法正常工作。此外，答案是说他应该在 在他的代码中使用哪个 URL（only 出现在问题中的地方），所以即使在这方面，这个答案有什么不正确的地方?

@NickCraver：是的，你是对的，当 API 密钥仍然有效时，我能够找到我下载的旧结果。但也许 OP 为回调提供了错误的参数？让我检查一下 API 文档...

【参考方案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");

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

希望对你有所帮助。

【参考方案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);

【讨论】：

"首先您必须确保您调用的 api 支持 jsonp（如果不支持，您将看到 json 但您将无法用它做任何事情）。"是的，我在控制台中看到它，但无法访问它。我还看到为回调函数名称生成的随机数。谢谢马特！

所以现在访问它返回的 json 指定一个回调。所以做这样的事情： function makeRequest ( $.getJSON("url?callback=someCallback", ...); ) 然后有另一个函数名为你的回调名称，所以在这种情况下是“someCallback”。 function someCallback do you want with the json in here 如果这不起作用，那么 api 还不支持 jsonp。希望有帮助！