如何使用方法get修复Form动作

Question

我的代码有一个小问题。基本上，我的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");

在此变量中，我可以存储位置。而这个变量，我想在JavaScript代码中附加到确实从API提取数据的链接。当用户输入例如：New York，然后按Search时，表单操作应将他重定向到page2.html，在那里我可以显示天气数据。

如何从第1页输入位置信息，在第2页中显示天气数据？我尝试了很多次，但是没有运气。下面是一些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);

我希望在div所在的第2页中有天气数据。有人可以给我个建议吗？谢谢！

Answer 1

由于第1页中的表单在第2页中不存在，因此请删除let searchButton = document.getElementById("searchBtn");let searchInput = document.getElementById("searchInput");if (searchButton) {&nbsp; &nbsp; searchButton.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; let searchTerm = searchInput.value;&nbsp; &nbsp; &nbsp; &nbsp; if (searchTerm)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; searchWeather(searchTerm);&nbsp; &nbsp; });}而是放ley searchTerm = new URLSearchParams(location.search).get('location');searchWeather(searchTerm);解释提交第1页的表单后，它将像page2.html?location=xxxxxxxx的值在哪里<input name='location' ...location.search 将 ?location=xxxxURLSearchParams 使处理这些（特别是在您拥有多个）时比通过箍拆分/解码/跳转的旧方法更容易

Answer 2

我们可以简单地提交表单并从page2.html上的url获取当前表单输入。<form method="get" name="basicSearch" id = "basicSearch" action="page2.html">&nbsp; &nbsp; &nbsp; &nbsp; <input name="location" type="text" class="BasicSearch" id="searchInput" placeholder="Location">&nbsp; &nbsp; &nbsp; &nbsp; <button type= "submit" class="BasicSearch" id="searchBtn" placeholder="Search">Search</button></form>并且在page2.html的负载（在您的ajax调用之前）上，我们可以通过以下操作从URL获取“ searchInput”（位置）：<script>&nbsp; &nbsp;let params = (new URL(document.location)).searchParams;&nbsp; &nbsp;var searchInput= params.get('location');</script>现在，我们可以将“ searchInput”参数用于您的api调用并获取结果。