jQuery：请求 getJSON + SunlightLabs API 帮助

Posted 2023-03-03

【中文标题】jQuery：请求 getJSON + SunlightLabs API 帮助

【英文标题】：jQuery: getJSON + SunlightLabs API help requested

【发布时间】：2011-07-20 04:05:52

【问题描述】：

我在使用 jQuery 的 getJSON 函数从 API 调用中提取特定元素时遇到问题。我正在尝试使用 SunlightLab 的 congress API 来获取有关立法者的特定信息。在下面的示例中，我试图拉取立法者的网站：

$.getJSON("http://services.sunlightlabs.com/api/legislators.get.json?apikey=[api key]&lastname=Weiner&jsonp=?" ,  function(data) 

    alert("hello from sunlight");
    alert(data.response.legislator.website);

); 

使用上面的代码，第一个警报出现了，但第二个警报甚至没有出现。我知道在这种情况下 getJSON 应该使用 JSONP，并且我认为我已正确设置，以“&jsonp =？”结束我的 URL。

将我的 getJSON 函数中的 URL 放入 Web 浏览器会给我这个：

?("响应": "立法者": “网站”： “http://weiner.house.gov/”、“传真”： “202-226-7253”，...等

我有点被“？”出现在这个开头，但如果第一个警报出现，那么请求一定是成功的......

【参考方案1】：

您正在使用的 URL 将 JSONP 回调设置为等于 ?，这意味着它使用 javascript 对象的参数注入了一个名为 ? 的 JavaScript 函数。这是无效的。因此，请求成功，但您定义的包装函数没有被调用（并且无效）。

您可以将 URL 更改为 jsonp=callback（或其他一些处理函数名称），然后定义一个名为 callback 的函数来处理需要该对象的参数。

在 jQuery 中（自动）触发 JSONP 支持的一种方法是将键切换为“回调”，以便它向 jQuery 发出信号，表明您正在执行 JSONP 调用。即callback=callback。

编辑：正如 Drackir 所指出的，jQuery 在 $.ajax 中提供了一个设置，以便让它定义自己的回调函数名称，但您需要通过设置 @ 向它发出信号表明这是一个 JSONP 调用987654330@ 在$.ajax 通话中。

【讨论】：

jQuery 自动将其转换为唯一命名的函数。请参阅here（特别是 jsonp 设置）。

@Drackir 我正在寻找那个。不确定 jquery 是否有 jsonp 或者它是否在其他东西之下。还有code.google.com/p/jquery-jsonp

【参考方案2】：

问号是因为您指定 JSONP 回调函数为 ?在您的查询字符串中（即&jsonp=?）。由于安全问题（特别是same-origin policy），您不能对与您所在页面位于同一域之外的站点发出 AJAX 请求。为了解决这个问题，JSONP 通过创建一个脚本标签来工作，并将 SRC 设置为另一个站点上脚本的 URL。这将加载外部 JavaScript 文件并运行那里的任何代码。现在，为了将该外部代码与您的 JavaScript 链接起来，外部 API 采用要调用的函数的名称 (&jsonp=functionnametocall)。返回的 JavaScript 调用该函数并将它尝试返回的数据作为 JSON 对象作为第一个参数传递。

所以，当您去那里时看到问号的原因是因为您将问号传递给 jsonp 查询字符串参数。 jQuery 会自动将http://www.test.com/api/apikey=292929&callback=? 等url 中的问号转换为唯一命名的函数。这是由 jQuery 在后台处理的，因此您不必考虑它。

现在，也就是说，我不知道 jQuery 是否检测到回调参数的名称是否为 callback=? 以外的名称。 $.getJSON() 不过是较长的缩写形式：

$.ajax(
  url: url,
  dataType: 'json',
  data: data,
  success: callback
);

我建议您尝试直接使用$.ajax() 并将jsonp 设置设置为等于"jsonp"。这告诉$.ajax() 方法查询字符串参数被称为jsonp 而不是callback。所以本质上是这样的：

$.ajax(
  url: url,
  dataType: 'json',
  data: data,
  success: callback,
  jsonp:"jsonp"
);

更多信息：$.getJSON | $.ajax()

【讨论】：

@bazookamoses：将&jsonp=? 添加回 URL。最后一个设置jsonp: 'jsonp' 告诉它在查询字符串中查找jsonp=? 而不是callback=?。

感谢您的帮助，看来密钥是 cache: true。 dataType: jsonp 自动附加 url，我认为这意味着 &jsonp=? 不是必需的。显然我对此不是很有经验，我可能是错的。但我得到了你的帮助，谢谢！

【参考方案3】：

好的，好的，所以这是一个相当简单的修复，在@Drackir 给出的示例中添加一行。缺少的部分是 ajax 设置中的“缓存：真”。最终的工作代码如下所示：

$.ajax(
         url: 'http://services.sunlightlabs.com/api/legislators.get.json?apikey=[api key]7&lastname=Weiner',
         dataType: 'jsonp',
         cache: true,
         jsonp: 'jsonp',
         success: function(data) 
             alert("hello from ajax") ;
             alert(data.response.legislator.website);
         

    );

我不确定为什么在这种情况下需要 'cache: true'。感谢您的帮助。

【讨论】：

这实际上应该以负面的方式影响它（至少如果您期望您正在检索的数据会发生变化）。你确定没有那个就不行吗？

哎呀！我尝试删除 'cache:true' 行，但没有它就无法工作。我会在工作时尝试提供更新。