console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>天气预报查询</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>天气预报查询</h1>
<div>
<input type="text" id="city" placeholder="请输入城市名称" />
<button onClick="queryWeather()">查询</button>
</div>
<div id="info" style="display: none">
<h6>查询成功，信息如下：</h6>
<p id="allInfo"></p>
</div>
<div id="error" style="display: none">
<h6>发生了一些错误，信息如下</h6>
<p id="errorInfo"></p>
</div>
<script>
function queryWeather() {
const city = document.getElementById('city').value;
if (city === '') {
alert('城市不能为空');
return;
}
axios
.get('http://wthrcdn.etouch.cn/weather_mini', {
params: {
city: city,
},
})
.then(function (response) {
document.getElementById('info').style.display = 'block';
document.getElementById('allInfo').innerText =
JSON.stringify(response);
})
.catch(function (error) {
document.getElementById('error').style.display = 'block';
document.getElementById('errorInfo').innerText =
JSON.stringify(error);
});
}
</script>
</body>
</html>