本网站提供成都公交车路线查询和换乘查询服务,方便您出行。
查询结果
html
body {font-family: Arial, sans-serif;
}h1 {text-align: center;
}.container {display: flex;justify-content: space-between;
}.form-container {width: 30%;
}.result-container {width: 70%;
}result {background-color: eee;padding: 10px;
}
html
const startInput = document.getElementById('start');
const endInput = document.getElementById('end');
const resultDiv = document.getElementById('result');function submitForm(event) {event.preventDefault();// 获取起点和终点值const start = startInput.value;const end = endInput.value;// 检查起点和终点是否为空if (!start ||!end) {alert('请填写起点和终点');return;}// 发送AJAX请求const xhr = new XMLHttpRequest();xhr.open('GET', `query.php?start=${start}&end=${end}`, true);xhr.onload = function() {if (xhr.status === 200) {// 解析JSON响应数据const data = JSON.parse(xhr.responseText);// 显示路线和换乘信息let resultHtml = '';resultHtml += `
路线:
`;for (const route of data.routes) {resultHtml += `
-
${route.name} (${route.busIds.join(', ')})
`;}resultHtml += `
`;resultHtml += `
换乘:
`;for (const transfer of data.transfers) {resultHtml += `
-
从${transfer.from}站换乘到${transfer.to}站
`;}resultHtml += `
`;resultDiv.innerHTML = resultHtml;} else {alert('查询失败,请稍后再试');}};xhr.send();
}form.addEventListener('submit', submitForm);
php
query($sql);$sql = "SELECT FROM transfers WHERE start = '$start' AND end = '$end'";
$transfersResult = $mysqli->query($sql);// 组织JSON响应数据
$data = ['routes' => [],'transfers' => [],
];while ($row = $routesResult->fetch_assoc()) {$data['routes'][] = ['name' => $row['name'],'busIds' => explode(',', $row['busIds']),
];
}while ($row = $transfersResult->fetch_assoc()) {$data['transfers'][] = ['from' => $row['from'],'to' => $row['to'],];
}// 输出JSON响应
header('Content-Type: application/json');
echo json_encode($data);
?>