javascript 检索 json Darksky.com API 数据天气答案

【问题标题】：javascript retrieving json Darksky.com API data weatherjavascript 检索 json Darksky.com API 数据天气
【发布时间】：2017-05-06 21:58:57
【问题描述】：

我正在尝试从 Darksky.com 的 API 检索 JSON 数据，这是一个天气数据，然后我成功地从 freegoip.com API 检索了我的纬度和经度。

然而，Darksky API 在响应所需的天气数据之前需要经度和纬度。这里的问题是我无法在提供所需数据后从 Darksky 检索 JSON 数据（温度、当前天气状态），即使我按照相同的说明检索第一个数据。任何想法都会很明显是我的代码 sn-ps：

$( document ).ready(function() {
   
    var darkSkyKey = "c565381ee9bf05151d254ffa7ca96313"; 
    var regionLink = "http://freegeoip.net/json/";
    
$.getJSON(regionLink, function(data) {
    var country_code = data.country_code;
    var country = data.country_name;
    var ip = data.ip;
    var time_zone = data.time_zone;
    var latitude = data.latitude;
    var longitude = data.longitude;
    });

$.get(regionLink, function (response) {
    $("#location").html("Location: " + response.city + ", " + response.region_name+". Latitude: "+response.latitude+", Longtitude: "+response.longitude);
    }, "jsonp");
  
    var weatherLink = "https://api.darksky.net/forecast/c565381ee9bf05151d254ffa7ca96313/"+latitude+","+longitude+".json";
    
$.getJSON(weatherLink, function(data2) {
    var timezone = data2.timezone;
    var temperature = currently.temperature;
    var status = data2.summary;
    });
    
$.get(weatherLink, function (response2) {
    $("#temp").html("Temprature now is: "+ response2.temperature);
    $("#weather").html("Weather Status: "+ response2.status);
}, "jsonp");
    
     
});

body{
    background-color: black;
    
}

.motto{
    margin-top: -21px;
    font-family: 'Kaushan Script', cursive;
    color:orange;
    text-align: center;
    font-size: 53px;
}

.topline{
    display: block;
    margin: auto;
}

.middleline{
    margin-top: -29px;
    height: 260px;
    align-items: center;
}

.weatherimage{
    background-color:currentColor;
    border-radius: 113px;
    border: 2px solid orange;
    position: relative;
    height: 262px;
    display: block;
    margin: auto;
    width: 40%;
    animation-name: pulse;
    animation-iteration-count: infinite;

}

.imgPartlycloudy{
    height: 250px;
    margin-left: 35%;
    position: absolute;
}

.imgRain{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}

.imgCloudy{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}
.imgSunny{
    height: 250px;
    margin-left: 35%;
    position: absolute;
    display: none;
}

.lastline{
    height: 222px;
}

.city{
    color:orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}
.temprature{
    color: orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}
.status{
    color: orange;
    font-size: 22px;
    font-family: 'Kaushan Script', cursive;
}

.elements{
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="weatherTodayStyle.css">
    <script type="text/javascript" src="weatherTodayFunctions.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>
<body>
    
    <div class="topline">
    <h2 class="motto"> Welcome to the Weather App</h2>
    <h3> </h3>
    </div>    
    
    <div class="middleline">
    <div class="weatherimage animated">
        <img alt="weather image" class="imgPartlycloudy" src="https://icons.wxug.com/i/c/v4/partlycloudy.svg">
        <img alt="weather image" class="imgRain" src="https://icons.wxug.com/i/c/v4/rain.svg">
        <img alt="weather image" class="imgCloudy" src="https://icons.wxug.com/i/c/v4/cloudy.svg">
        <img alt="weather image" class="imgSunny" src="https://icons.wxug.com/i/c/v4/sunny.svg">
        </div>
    
    </div>
        
    <div class="lastline">
    <div class="elements">
        <h5 class="status" id="weather"> Weather Status</h5>
        <h5 class="city" id="location">City </h5>
        <h5 class="temprature" id="temp">Temprature</h5>
        </div>
    
    </div>
    
    <a href="https://darksky.net/poweredby/">Powered by Dark Sky</a>

    </body>

</html>

【问题讨论】：

标签： javascript jquery json api

【解决方案1】：

您的问题是 darksky 站点不允许跨域请求。

此代码在我使用代理服务来提供结果时起作用

getLocation()
            .then(function (data) {

                var url ='https://crossorigin.me/https://api.darksky.net/forecast/c565381ee9bf05151d254ffa7ca96313/' + data.latitude + ',' + data.longitude;
                getDarkSky(url)
                    .then(function (res) {
                        console.log(res)
                    }).catch(function (err) {
                    console.log(err)
                })
            });


        function getLocation() {
            return $.getJSON(rl).done()
        }

        function getDarkSky(url) {

            return $.getJSON(url).done()
        }

查看此 SA 帖子以获取完整解决方案 "No 'Access-Control-Allow-Origin' header is present on the requested resource"

【讨论】：

能否请您详细说明我尝试使用的最后两个函数，但将数据嵌入到我的 htm 中，但我仍然无法从 API 中检索数据
只需调用请求的 url 并使用 .done() 表示数据检索已完成。这允许您使用 callfunction().then(function (datafromfunction) {}); 等待主函数中的结果；
对不起，这对我来说似乎有点棘手......所以我应该在哪里实现我的代码（ $("#temp").html("Temprature now is: "+ response2.temperature) ; ) 在我的页面上显示它？
用你的代码替换 console.log(res)，res.variable 将包含来自 darksky 的返回