HTML构建空气质量实时获取代码,网络爬虫之在线获取城市空气质量指数(AQI)源代码...
时间: 2023-07-16 11:12:36 浏览: 54
以下是一个简单的 HTML 代码示例,用于构建一个空气质量实时获取的网页:
```html
<!DOCTYPE html>
<html>
<head>
<title>Air Quality Index (AQI) - Real-time</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Air Quality Index (AQI) - Real-time</h1>
<p>Enter the name of a city to get its AQI:</p>
<form>
<label for="city">City:</label>
<input type="text" id="city" name="city">
<button type="submit">Get AQI</button>
</form>
<div id="aqi"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('form').submit(function(event) {
event.preventDefault();
var city = $('#city').val();
$.get('https://api.waqi.info/feed/' + city + '/?token=YOUR_TOKEN_HERE', function(data) {
$('#aqi').html(city + ' AQI: ' + data.data.aqi);
}).fail(function() {
$('#aqi').html('Error: Invalid city name or API token.');
});
});
});
</script>
</body>
</html>
```
这个 HTML 页面使用了 jQuery 库来处理表单提交事件。当用户在表单中输入城市名称并点击“Get AQI”按钮时,jQuery 会向一个能够提供城市 AQI 数据的 API 发送 GET 请求,并将结果显示在页面上。
请注意,这个示例中的 API URL 必须被替换为一个真实的 API URL,并且需要使用有效的 API token。获取一个免费的 API token 可以通过访问 https://aqicn.org/data-platform/token/#/ 。
此外,这个示例中的 API 仅仅是一个示例,实际应用中需要根据需要选择一个合适的 API 来获取空气质量数据。