实时到站查询，出行更方便！
script.js
javascript
// 获取元素
const busStopInput = document.getElementById("bus-stop");
const busRouteInput = document.getElementById("bus-route");
const resultList = document.getElementById("result-list");// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();// 提交表单时触发
document.querySelector("form").addEventListener("submit", (e) => {e.preventDefault();// 获取表单数据const busStop = busStopInput.value;const busRoute = busRouteInput.value;// 发送AJAX请求xhr.open("GET",`get-bus-data.php?bus-stop=${busStop}&bus-route=${busRoute}`);xhr.onload = () => {// 处理响应数据const data = JSON.parse(xhr.responseText);// 填充结果列表resultList.innerHTML = ""; // 清空结果列表if (data.error) {// 如果有错误，显示错误信息const errorListItem = document.createElement("li");errorListItem.textContent = data.error;resultList.appendChild(errorListItem);} else {// 如果没有错误，显示查询结果for (const item of data) {const listItem = document.createElement("li");listItem.textContent = `${item.busRoute}号即将到站，剩余${item.minutes}分钟`;resultList.appendChild(listItem);}}};xhr.send();
});get-bus-data.php
php
prepare("SELECT bus_route,arrival_time FROM bus_data WHERE bus_stop = ? AND bus_route = ?");
$stmt->bind_param("ss", $busStop, $busRoute);// 执行SQL语句
$stmt->execute();// 获取查询结果
$result = $stmt->get_result();
$data = [];
while ($row = $result->fetch_assoc()) {$data[] = $row;
}// 计算剩余分钟数
foreach ($data as $key => $item) {$arrivalTime = strtotime($item["arrival_time"]);$currentTime = time();$minutes = ceil(($arrivalTime - $currentTime) / 60);$data[$key]["minutes"] = $minutes;
}// 输出结果
if (empty($data)) {$error = "未找到相关数据";echo json_encode(["error" => $error]);
} else {echo json_encode($data);
}// 关闭数据库连接
$conn->close();
?>
