如何从离线访问在线JSON文件? (JavaScript的)

时间:2013-06-09 14:17:42

标签: javascript ajax xmlhttprequest

我正在使用Wunderground Weather API为我的学校项目制作天气网站。这是我用来获取JSON数据的代码:

$.getJSON("http://api.wunderground.com/api/<apikey>/conditions/q/" + wlocation + ".json", function(data){
    alert(data);
});

<apikey>是我放置API密钥的地方,$字符只是JQuery的快捷方式。

当我打开这个本地的网页时,没有发布,没有弹出警报,我收到错误:

XMLHttpRequest cannot load http://api.wunderground.com/api/<apikey>/conditions/q/<myzipcode>.json. Origin null is not allowed by Access-Control-Allow-Origin. 

在对此错误进行一些研究之后,听起来我可能需要创建一个Web服务器。但是,对于项目,我们需要将其作为.html文件夹和其他“Web文件”。有没有其他方法可以做到这一点,还是我必须制作一个Web服务器?这个项目很快就会到期,所以对任何帮助表示赞赏!

2 个答案:

答案 0 :(得分:3)

是的,您可以使用JSONP

我不确定 Wunderground Weather API 是否在JSON中有某种回调。但如果他们甚至做jQuery getJSON支持JSONP。

好像你遇到Same origin policy

答案 1 :(得分:1)

这是您在原始帖子(http://www.wunderground.com/weather/api/d/docs?d=resources/code-samples)中提供的链接的代码示例。他们使用JSONP。是的,正如@antyrat所说,这是一个CORS问题。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
  $.ajax({
      url : "http://api.wunderground.com/api/Your_Key/geolookup/conditions/q/IA/Cedar_Rapids.json",
      dataType : "jsonp",
      success : function(parsed_json) {
          var location = parsed_json['location']['city'];
          var temp_f = parsed_json['current_observation']['temp_f'];
          alert("Current temperature in " + location + " is: " + temp_f);
      }
  });
});
</script>