gpt4 book ai didi

javascript - 无法从内部函数检索 json 响应

转载 作者:行者123 更新时间:2023-12-03 02:37:25 25 4
gpt4 key购买 nike

我正在使用 $.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>

最佳答案

按下提交按钮后,您的页面就会重新加载。将按钮类型更改为 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);

关于javascript - 无法从内部函数检索 json 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48489803/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com