Question

我正在freecodecamp.com上进行“本地天气”前端开发挑战，而且我在对某些天气API进行API调用时遇到了一些麻烦。挑战围绕获取用户的位置，然后拨打天气API来显示他们所在区域的天气。我曾尝试使用Dark Sky API和OpenWeatherMap API，但它们都没有返回任何内容。我可以将两个API链接放入我的浏览器，它们都显示我需要的信息，但是当我将它们放入我的javascript时，它们无法返回信息。以下是我目前使用$ .ajax和Dark Sky API的尝试：

$(document).ready(function() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
    
      var lat = position.coords.latitude;
      var long = position.coords.longitude;
 
  
    
     //$("#loc").html(lat + " " + long);
 
      $.ajax({
        url: "https://api.darksky.net/forecast/96dd30a49debe62a67b208f705e3d706/" + lat + "," + long,
        success: function(json) {
          $("#loc").html("Your location: " + json.latitude + "," + json.longitude);
          $("#temp").html("Temperature: " + json.currently.temperature);
          $("#fc").html("Test " + json.minutely.summary);
        },
    
        error: function(xhr, status, error) {
          console.log("error", status, xhr, error);
        }    
    });
  });
  }
});

提前致谢！

Answer 1

更改经度变量的名称。 Long是javascript中的保留字。请参阅：https://www.w3schools.com/js/js_reserved.asp

Answer 2

这应该是CORS错误

使用dataType: "JSONP"使其正常工作

一个有效的JSFiddle示例here

有关详细信息，请参阅What is JSONP All about

Answer 3

请将此代码复制并粘贴到IDE /文本编辑器中并进行测试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function() {


  //if (navigator.geolocation) {
    //navigator.geolocation.getCurrentPosition(function (position) {

      //var lat = position.coords.latitude;
        var lat = '27.268416';
      var longTest = '-82.463198';



     //$("#loc").html(lat + " " + long);

      $.ajax({
        url: "https://api.darksky.net/forecast/96dd30a49debe62a67b208f705e3d706/" + lat + "," + longTest,
        dataType: 'JSONP',
        success: function(json) {
          $("#loc").html("Your location: " + json.latitude + "," + json.longitude);
          $("#temp").html("Temperature: " + json.currently.temperature);
          $("#fc").html("Test " + json.minutely.summary);
        },
        success: function(data) {
            console.log(data);
        }, 
        error: function(xhr, status, error) {
          console.log("error", status, xhr, error);
        }    
    });
  //});
  //}
});
</script>

我注释掉了if语句并硬编码了一些坐标来测试你的代码。有用。我找回了一个物体。只要你的if语句执行并且你的代码替换了经度和纬度的值，你应该是好的。请不要使用JS保留字符串。

$ .getJSON和$ .ajax无法返回JSON对象

3 个答案: