Question

我正在制作天气应用，希望我的天气数据在新页面上打开，但当前正在搜索栏下方打开。当我按下搜索按钮时，我希望它使用Javascript代码中的天气数据重定向到另一个HTML页面。我该怎么做最简单的方法？

这是我的Javascript代码，可获取天气数据： $（function（）{

$("#city-form").on('submit', function(e){
    e.preventDefault();
    e.returnValue = false;
    search($("#city-input").val());
});

function search(city){

    $("#city").html("");
    $("#description").html("");
    $("#temp").html("");
    $("#humidity").html("");
    $("#wind").html("");

    var query = {
        'q' : city,
        'lang': 'SE',
        'units': 'metric',
        'APPID' : '31fb7e0aa1f90896809571484a8b13cc'
    };


    $.ajax({
        url: "http://api.openweathermap.org/data/2.5/weather",
        type: 'get',
        async: true,
        contentType: "application/x-www-form-urlencoded;charset=ISO-8859-15",
        dataType: "json",
        data: query,
        error: function (request, status, error) {
            alert(JSON.parse(request.responseText).message);
            console.log(request.responseText);
        },
        success: function (data) {
            // Logs server reseponse
            console.log(JSON.stringify(data));

            // Sends data for presentation
            present(city, data);
        }
    });
}



function present(city, data){

    $("#city").html(city);
    $.each(data.weather, function(i, weather) {
        $("#description").append("<img class='w-icon' src='http://openweathermap.org/img/w/" + weather.icon  + ".png' />");
        $("#description").append(weather.description  + " ");
    });
    $("#temp").html(data.main.temp + " °C");
    $("#humidity").html("Luftfuktighet: "+ data.main.humidity + "%");
    $("#wind").html("Vind: "+ data.wind.speed + " m/s");


}

}）;

这是我的带有搜索栏和天气数据的HTML代码：

     <form id="city-form">
    <input type="text" id="city-input" class="form-control" placeholder="Sök på stad" required>
    <button type="submit" id="submit-btn" class="btn btn-primary">Sök</button>
        <input type="reset" value="Reset">
</form>


<div id="weather">
<div id="city"></div>
<div id="temp"></div>
<div id="description"></div>
<div id="humidity"></div>
<div id="wind"></div>

    </div>

Answer 1

我建议您创建另一个页面来接收城市作为查询参数。

myPage？city =“ london”

重定向代码：

    function search(city){
        window.location.href = 'myPage?city=' + city
    }

如果您希望在新标签页中打开：Open a URL in a new tab (and not a new window) using JavaScript

在新页面上，您可以从参数中恢复城市 How to get the value from the GET parameters?

以与现在相同的方式执行ajax请求，将显示信息移至新页面：

   <div id="weather">
   <div id="city"></div>
   <div id="temp"></div>
   <div id="description"></div>
   <div id="humidity"></div>
   <div id="wind"></div>

如何在新页面上打开数据？

1 个答案: