我的代码有一个小问题。 基本上,我的 index.html 文件中有一个表单:
第 1 页的表格如下:
<form method="get" name="basicSearch" id = "basicSearch" action="page2.html">
<input name="location" type="text" class="BasicSearch" id="searchInput" placeholder="Location">
<button type= "submit" class="BasicSearch" id="searchBtn" placeholder="Search"></button>
</form>
对于此表单,我想使用 OpenWeatherMap API 来获取一些天气数据。我的问题如下: 我想获取用户在表单中输入的内容,我认为我可以通过使用获取,例如:
var searchInput = document.getElementById("searchInput");
在这个变量中我可以存储位置。
而这个变量,我想附加到从 API 获取数据的链接中,在 javascript 代码中。
例如,当用户输入:纽约并按搜索时,表单操作应将他重定向到 page2.html
,我可以在那里显示天气数据。
如何使用 page1 输入的位置在 page2 中显示天气数据?我尝试了很多次但没有运气。 下面是一些 Javascript 代码:
let units = 'metric';
let searchMethod = 'q';
let searchButton = document.getElementById("searchBtn");
let searchInput = document.getElementById("searchInput");
if (searchButton) {
searchButton.addEventListener('click', () => {
let searchTerm = searchInput.value;
if (searchTerm)
searchWeather(searchTerm);
});
}
function searchWeather(searchTerm) {
fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`).then(result => {
return result.json();
}).then(result => {
init(result);
})
}
function init(resultFromServer){
let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader');
let temperatureElement = document.getElementById('temperature');
let humidityElement = document.getElementById('humidity');
let windSpeedElement = document.getElementById('windSpeed');
let cityHeader = document.getElementById('cityHeader');
let weatherIcon = document.getElementById('documentIconImg');
weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png';
let resultDescription = resultFromServer.weather[0].description;
weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);
temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '°' + " C";
windSpeedElement.innerHTML = 'Winds at ' + Math.floor(resultFromServer.wind.speed) + ' mph';
cityHeader.innerHTML = resultFromServer.name;
humidityElement.innerHTML = 'Humidity levels at ' + resultFromServer.main.humidity + '%';
}
这是一些应该获取天气数据的 javascript 代码。 然后,在 page2 中,我在 HTML 中有以下内容:
<div id = "weatherContainer">
<div id = "weatherDescription">
<h1 id = "cityHeader"></h1>
<div id= "weatherMain">
<div id = "temperature"></div>
<div id = "weatherDescriptionHeader"></div>
<div><img id = "documentIconImg"></div>
</div>
<hr>
<div id = "windSpeed" class = "bottom-details"></div>
<div id = "humidity" class = "bottom-details">></div>
</div>
</div>
我希望在 div 所在的 page2 中有天气数据。 有人可以给我一个建议吗? 谢谢!
最佳答案
由于第1页中的表单在第2页中不存在,所以去掉
let searchButton = document.getElementById("searchBtn");
let searchInput = document.getElementById("searchInput");
if (searchButton) {
searchButton.addEventListener('click', () => {
let searchTerm = searchInput.value;
if (searchTerm)
searchWeather(searchTerm);
});
}
代替
ley searchTerm = new URLSearchParams(location.search).get('location');
searchWeather(searchTerm);
解释
当提交第1页表单时,它会加载第2页
page2.html?location=xxxx
哪里xxxx
是 <input name='location' ...
的值
location.search
将是 ?location=xxxx
URLSearchParams
使处理这些(尤其是当你有多个)比分割/解码/跳过箍的旧方法更容易
关于javascript - 如何使用方法 get 修复表单操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55572729/