如何通过 OpenWeatherAPI 使用 JSONP GET 请求？

Posted 2023-03-03

【中文标题】如何通过 OpenWeatherAPI 使用 JSONP GET 请求？

【英文标题】：How to use JSONP GET request with the OpenWeatherAPI?

【发布时间】：2013-01-12 02:35:58

【问题描述】：

我正在尝试使用 OpenWeatherAPI 来使用 JQuery get 请求执行获取 JSONP 数据。我的查询结构如下：

function getWeather(callback) 
    var weather = 'http://openweathermap.org/data/2.1/find/city?lat=13.3428&lon=-6.2661&cnt=10&jsoncallback=?';
    jQuery.getJSON(weather, callback);


// get data:
getWeather(function(data)
    console.log('weather data received');
);

我收到以下错误消息：

语法错误：标签无效

但是，数据正在返回，因为我可以在 Firebug 中单击它，它给了我预期的结果。我在客户端执行这一切，所以我的 JSONP 请求可能有一个基本错误。在这个话题上搜索也提示返回的数据可能是JSON形式而不是JSONP，但我不确定有什么区别。

【参考方案1】：

如果您使用的是 jQuery，您可以使用内置的 JSONP 功能为您处理回调。只需使用 $.ajax，如下所示：

function getWeather(callback) 
    var weather = 'http://openweathermap.org/data/2.1/find/city?lat=13.3428&lon=-6.26612&cnt=10';
    $.ajax(
      dataType: "jsonp",
      url: weather,
      success: callback
    );


// get data:
getWeather(function (data) 
    console.log('weather data received');
    console.log(data.list[0].weather[0].description);
);

jsFiddle：http://jsfiddle.net/wCjW3/1/

参考：http://api.jquery.com/jQuery.ajax/

【参考方案2】：

看起来api说你应该使用callback而不是jsoncallback作为url中的参数。

Descriped in the table here

callback - JSONP 回调的函数名。 http://en.wikipedia.org/wiki/JSONP

以下代码对我有用：

$.getJSON('http://openweathermap.org/data/2.1/find/city?lat=13.3428&lon=-6.2661&cnt=10&callback=?', function(data)  console.log(data); );

【讨论】：

有趣，谢谢。我不太明白这是如何处理跨域问题的（尽管据我所知它确实工作得很好）。

您不允许在其他域上执行 ajax 请求，但您可以包含和执行来自其他域的脚本（例如 jquery 的 CDN）。 JSONP 将其用作同源策略的解决方法。 JSONP 返回一个脚本，其中包含一个以数据为参数的函数调用。该函数在您的代码中本地定义。