Question

我使用$ .getJSON方法从开放天气中检索天气数据。当我为文档就绪函数使用显式URL字符串时，我能够从响应JSON中检索值并将它们写入页面。这很好。

我正在尝试创建一个基本用户输入来通过邮政编码查询数据。我创建了一个嵌套函数，API URL作为连接字符串。我无法确定为什么嵌套函数submitZip中的代码没有以与文档就绪函数相同的方式将响应写入页面。

我已经尝试过调试，看起来该字符串正确连接并成功调用API，但由于某种原因，我无法从响应中检索数据。关于我的任何想法可能都不正确吗？

var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
        place.innerText = data.main.temp;
    });
}); 
var weather = document.getElementById("Weather");
function submitZip() {
    var zipCode = document.getElementById("Zip-Code");
    var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
    
    $.getJSON(fullURL, function (data) {
        //var currentTemp = api.main.temp;
        weather.innertText = data.main.temp;
        
    });
    return weather;
};


var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Weather</title>
</head>
<body>
    <h2 id="header">This page will be utilitzed as practice for API</h2>
    <p id="meat"></p>
        <form>
      <p>Enter the Zip Code to see the Weather there!</p>
      <input id = "Zip-Code" type="text"/>
      <input id = "submit-zip" type="submit"/>
    </form>
    <div>
      <p id= "Weather"></p>
    </div>
  </body>
  </html>
<script src="javascript/main.js"></script>
</body>

</html>

Answer 1

按下提交按钮后，您的页面就会重新加载。将按钮类型更改为button或使用event.prevenDefault()

阻止默认行为

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Weather</title>
</head>
<body>
    <h2 id="header">This page will be utilitzed as practice for API</h2>
    <p id="meat"></p>
        <form>
      <p>Enter the Zip Code to see the Weather there!</p>
      <input id = "Zip-Code" type="text"/>
      <input id = "submit-zip" type="submit"/>
    </form>
    <div>
      <p id= "Weather"></p>
    </div>
  </body>
  </html>
<script src="javascript/main.js"></script>
</body>

</html>

var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
        place.innerText = data.main.temp;
    });
}); 
var weather = document.getElementById("Weather");
function submitZip(e) {

    e.preventDefault();

    var zipCode = document.getElementById("Zip-Code");
    var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";

    $.getJSON(fullURL, function (data) {
        //var currentTemp = api.main.temp;
        weather.innertText = data.main.temp;

    });
    return weather;
};


var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);

Answer 2

两个问题：

单击按钮时，表单将被提交（并重新加载）。通过在事件对象上调用e.preventDefault()来避免这种情况。
您在weather.innertText中遇到拼写错误。删除中间的额外t

工作代码：

var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
        place.innerText = data.main.temp;
    });
}); 
var weather = document.getElementById("Weather");
function submitZip(e) {
    var zipCode = document.getElementById("Zip-Code");
    var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
    
    $.getJSON(fullURL, function (data) {
        //var currentTemp = api.main.temp;
        weather.innerText = data.main.temp;
        
    });
    e.preventDefault();
};


var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Weather</title>
</head>
<body>
    <h2 id="header">This page will be utilitzed as practice for API</h2>
    <p id="meat"></p>
        <form>
      <p>Enter the Zip Code to see the Weather there!</p>
      <input id = "Zip-Code" type="text"/>
      <input id = "submit-zip" type="submit"/>
    </form>
    <div>
      <p id= "Weather"></p>
    </div>
  </body>
  </html>
<script src="javascript/main.js"></script>
</body>

</html>

无法从内部函数

2 个答案: