Question

我正试图建立一个显示天气预报的网站。它已经显示了天气预报。如果我想输入一个不存在的城市，我希望出现一条消息。我已经尝试使用404进行某些操作，但未在控制台日志中显示。我希望有一个人可以帮助我。预先谢谢你！

function getData() {

    let apikey = 'private';
    var city = document.querySelector('#city').value;
    let requestURL = 'https://api.openweathermap.org/data/2.5/forecast?q='+city+'&appid='+apikey+'&units=metric';
    let request = new XMLHttpRequest();
    request.open('GET', requestURL, true);
    request.responseType = 'json';
    request.send();
    request.onload = function () {
        let data = request.response;
        addData(data);
        var body = document.querySelector('body');

        var div = document.createElement('div');

        for (var i = 0; i < data.list.length; i += 8) {
            // console.log(data.list[i].dt_txt);
            div.appendChild( createEL('p',
                '<b>Date en time: ' + data.list[i].dt_txt+'<br></b>'+
                'City: ' + city+'<br>'+
                'Country: ' + data.city.country + '<br>'+
                'Temperature: ' +data.list[i].main.temp+'<br>'+
                'Weather: ' +data.list[i].weather[0].main));

        }

        if (XMLHttpRequest == '404'){
            console.log("Doesn't exist")
        }


        var body = document.querySelector('body');
        body.appendChild(div);

        function createEL(tag, content){
            var el = document.createElement(tag);
            el.innerHTML = content;
            return el;
        }
    }
}

var button = document.querySelector('#show');

button.addEventListener("click", function (ev) {
    ev.preventDefault();
    getData();
},false);

function addData(jsonData) {

    var city = document.querySelector('#city').value;

    var input = document.querySelector('#city');



}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather</title>
</head>
<body>
<h1>Weather</h1>

City: <input type="text" id="city" name="city" placeholder="city">
<button id="show" name="show">Show</button>

<script src="js/weather.js"></script>
</body>
</html>

Answer 1

XMLHttpRequest永远不会等于404。是用来创建发出HTTP请求的对象的构造函数！

您需要检查request.status。

Answer 2

如果您要从API发送状态代码，则需要检查request.status。

let request = new XMLHttpRequest()
console.log(request.status);

要显示不存在，您可以检查响应数据的长度，例如

if(data.list.length==0)
{
    console.log("Does not exists.");
}

HTML页面不显示城市不存在

2 个答案: