Question

我想建立一个小型网站，让我可以了解城市的天气。我得到了api的响应，但是无法显示温度。

这是我的js和html文件：

var api = "http://api.openweathermap.org/data/2.5/weather?q=";
var apiKey = "secret key";
var unit = "&units=metric";
var json;

// start api call

function apiCallUrl() {
    var city = document.getElementById('city').value;
    var url = api + city + unit + apiKey;
    /* var json_obj = JSON.parse(Get(url));
    console.log("this is the author name: "+json_obj.author_name); */
    console.log(url);
    jsonObj(url);
}

// create JSON Object

function jsonObj(url) {
    json = $.getJSON(url);
    console.log(json);
    weather(json);
}
// print weatherdata

function weather(json) {
    console.log(json);
    document.getElementById("temperature").innerHTML = json.main.temp;
}

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Parkwetter</title>
   <meta name="description" content="Zusammenfassung des Inhalts">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="style.css" rel="stylesheet" media="screen">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <h1>Parkwetter</h1>
    </header>
    <main>
        <p>Von welcher Stadt möchtest du das Wetter sehen?</p>
        <input type="text" id="city" value="Leipzig"></input>
        <button id="submit" onclick="apiCallUrl()">submit</button>
        

        <p>Temperatur: <span id="temperature"></span> °C</p>
    </main>
    <footer>

        <script src="script.js"></script>
    </footer>
</body>
</html>

您是否有任何线索为什么我的JSON未定义以及如何解决该问题？

Answer 1

您需要根据api doc将函数作为第二个参数传递给getJSON函数

功能原型

jQuery.getJSON( url [, data ] [, success ] )

这是相同的工作解决方案-

var api = "https://api.openweathermap.org/data/2.5/weather?q=";
var apiKey = "*secret*";
var unit = "&units=metric";
var json;

// start api call

function apiCallUrl() {
    var city = document.getElementById('city').value;
    var url = api + city + unit + apiKey;
    /* var json_obj = JSON.parse(Get(url));
    console.log("this is the author name: "+json_obj.author_name); */
    console.log(url);
    jsonObj(url);
}

// create JSON Object

function jsonObj(url) {
    $.getJSON(url, weather); //passed weather as second param
}
// print weatherdata

function weather(json) {
    console.log(json);
    document.getElementById("temperature").innerHTML = json.main.temp;
}

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Parkwetter</title>
   <meta name="description" content="Zusammenfassung des Inhalts">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="style.css" rel="stylesheet" media="screen">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <h1>Parkwetter</h1>
    </header>
    <main>
        <p>Von welcher Stadt möchtest du das Wetter sehen?</p>
        <input type="text" id="city" value="Leipzig"></input>
        <button id="submit" onclick="apiCallUrl()">submit</button>
        

        <p>Temperatur: <span id="temperature"></span> °C</p>
    </main>
    <footer>

        <script src="script.js"></script>
    </footer>
</body>
</html>

无法从开放式天气API访问JSON

1 个答案: