1

我正在 Raspberry pi 上使用 Coder 学习 HTML、CSS 和 Javascript。目前，我正在尝试制作一个显示时间、日期和当前天气的简单页面。$.getJSON函数中的调用出了点问题getWeather()。

键入传递给的 URL$.getJSON可以正常工作（即，页面加载了 JSON 中的所有信息），但永远不会显示“Got Weather”字符串。我也尝试过使用请求 JSON 或 JSONP 数据类型的 AJAX 调用。这些方法都不起作用。我错过了什么？

$(document).ready( function() {

    //This code will run after your page loads
    function displayTime() {
        var current_time = new Date();
        var hours = current_time.getHours();
        var minutes = current_time.getMinutes();
        var seconds = current_time.getSeconds();
        var meridiem = "AM"; // default is AM

        var day = current_time.getDay();

        if(seconds < 10) {
            seconds = "0" + seconds;   
        }

        if(minutes < 10) {
            minutes = "0" + minutes;   
        }

        // Set the meridiem for a 12hr clock
        if(hours > 12) {
            hours -= 12; 
            meridiem = "PM"
        } else {
            meridiem = "AM"   
        }
        var clock_div = document.getElementById('clock');
        clock_div.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;

        // Depending on the value of 'day', set the corresponding string
        var day_div = document.getElementById('day');

        var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        var today = weekday[current_time.getDay()];
        day_div.innerText = today;

        // Get the date information
        var date = current_time.getDate();
        // Get the year
        var year = current_time.getFullYear();
        // Get the month and set the string
        var month = new Array(12);
        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June"; 
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";

        var this_month = month[current_time.getMonth()];

        // set the string 
        var date_div = document.getElementById('date');
        date_div.innerText = this_month + " " + date + " " + year;
    }

    function getWeather() {
        var api_key = REMOVED; // API key for open weather
        var weather_api = "http://api.openweathermap.org/data/2.5/weather?lat=40.115&lon=-88.27&units=imperial&appid=" + api_key;


        var weather_div = document.getElementById('weather');

        $.getJSON(weather_api).then(function(result){
        //alert("City: "+result.city.name);
        //alert("Weather: "+ result.list[0].weather[0].description);
        weather_div.innerText = "Got Weather";
        });

        //weather_div.innerText = "Got Weather";
    }

    // This runs the displayTime function the first time
    displayTime();
    getWeather();

    // This makes the clock "tick" repeatedly by calling it every 1000 ms 
    setInterval(displayTime, 1000);
    setInterval(getWeather, 2000);

});

HTML：

<!DOCTYPE html>
<html>
<head> 
    <title>Coder</title>
    <meta charset="utf-8">
    <!-- Standard Coder Includes -->
    <script>
        var appname = "{{app_name}}"; //app name (id) of this app
        var appurl = "{{&app_url}}";
        var staticurl = "{{&static_url}}"; //base path to your static files /static/apps/yourapp
    </script>
    <link href="/static/apps/coderlib/css/index.css" media="screen" rel="stylesheet" type="text/css"/>
    <script src="/static/common/js/jquery.min.js"></script>
    <script src="/static/common/ace-min/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/apps/coderlib/js/index.js"></script>
    <script>
        Coder.addBasicNav();
    </script>
    <!-- extra inludes to get weather from OpenWeather -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
    <script src="js/vendor/jquery-ui.min.js"></script>
    <!-- End Coder Includes -->

    <!-- This app's includes -->
    <link href="{{&static_url}}/css/index.css" media="screen" rel="stylesheet" type="text/css"/>
    <script src="{{&static_url}}/js/index.js"></script>
    <!-- End apps includes -->
</head>
<body>
    <div id='day'></div><br>
    <div id='date'></div>
    <div id='clock'></div>
    <div id='weather'></div>
</body>
</html>

CSS：

body {
 background-color: black;   
}

#day {
    height:100px;
    width: 300px;
    margin-left: 10px;
    padding-top: 50px;
    position: fixed;
    top: 0px; left: 20px;
    font-family: courier, monospace;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
}

#date {
    height:100px;
    width: 300px;
    margin-left: 10px;
    padding-top: 50px;
    position: fixed;
    top: 50px; left: 20px;
    font-family: courier, monospace;
    text-align: center;
    color: white;
    font-size: 20px;
}

#clock {
    height:100px;
    width: 300px;
    margin-left: 10px;
    padding-top: 50px;
    position: fixed;
    top: 100px; left: 20px;
    font-family: courier, monospace;
    text-align: center;
    color: white;
    font-size: 20px;
}
4

1 回答 1

0

我发现了这个问题。打开开发者控制台显示“阻止加载混合活动内容...”的错误。看来我需要更好地熟悉开发人员工具。

在 Coder 中构建的应用程序通过 HTTPS 访问。但是，对 openweather 的调用是通过 HTTP 进行的。仅当您拥有专业（付费）订阅时，openweather API 才允许 HTTPS 调用。幸运的是，https://forecast.io允许每天进行一定数量的免费通话并使用 HTTPS。

于 2016-05-04T16:41:02.557 回答