HTML,写一个查询,文本框输入值,点击查询带入http://xmairavt7.xiamenair.com/WarningPage?WarningAirports=变量,然后输出第二行数据
时间: 2024-09-25 20:04:47 浏览: 12
HTML是一种标记语言,常用于创建网页结构。为了实现您描述的功能,我们可以创建一个简单的HTML表单结合JavaScript来动态提交查询。这是一个示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>查询页面</title>
</head>
<body>
<h2>请输入机场名称:</h2>
<input type="text" id="airportInput" placeholder="请输入机场名">
<button onclick="queryAirports()">查询</button>
<div id="result"></div>
<script>
function queryAirports() {
const airportInput = document.getElementById('airportInput').value;
const url = "http://xmairavt7.xiamenair.com/WarningPage?WarningAirports=" + encodeURIComponent(airportInput);
fetch(url)
.then(response => response.text())
.then(data => {
// 假设数据显示为表格形式,我们取第二行
const rows = data.split('\n');
if (rows.length > 1) {
document.getElementById('result').innerText = rows[1];
} else {
alert("抱歉,未找到相关数据");
}
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
```
在这个示例中,用户可以在文本框中输入机场名称,点击查询按钮后,会将输入值编码后拼接到URL中,并通过`fetch`发送请求。服务器响应的数据会被解析成文本并显示在`result` div元素中,通常假设返回的是换行分隔的数据。