jQuery: getJSON +请求 SunlightLabs API 帮助

Question

我在使用 jQuery 的 getJSON 函数从 API 调用中提取特定元素时遇到问题。我正在尝试使用 SunlightLab 的 国会 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”，...等

我对“？”感到有点困惑。显示在本文开头，但如果显示第一个警报，则请求一定成功......

Answer 1

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

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

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

编辑：正如 Drackir 指出的，jQuery 在 $ 中提供了一个设置。 ajax 让它定义自己的回调函数名称，但您需要通过在 中设置 dataType: 'jsonp' 来向它表明它是一个 JSONP 调用$.ajax 调用。

Answer 2

出现问号是因为您将 JSONP 回调函数指定为 ?在您的查询字符串中（即 &jsonp=?）。出于安全考虑（特别是同源策略），您无法向站点发出 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()

Answer 3

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

$.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”。感谢您的帮助。