如何使用方法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);

    temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176' + " 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所在的第2頁中有天氣數據。 有人可以給我個建議嗎？ 謝謝！

Answer 1

由於第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頁的表單后，它將像

page2.html?location=xxxx

其中xxxx是<input name='location' ...

location.search將是?location=xxxx

URLSearchParams使處理這些問題（尤其是在您有多個問題時）比通過箍拆分/解碼/跳轉的舊方法更容易

Answer 2

我們只需提交表單並從page2.html上的url獲取當前表單輸入即可。

<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">Search</button>

</form>

並且在page2.html的負載（在您的ajax調用之前）上，我們可以通過以下操作從URL獲取“ searchInput”（位置）：

<script>
   let params = (new URL(document.location)).searchParams;
   var searchInput= params.get('location');
</script>

現在，我們可以將“ searchInput”參數用於您的api調用並獲取結果。