查询结果
|
车次
|
出发时间
|
抵达时间
|
历时
|
票价
|
script.js
javascript
const form = document.querySelector('form');
const results = document.querySelector('results tbody');form.addEventListener('submit', (event) => {event.preventDefault();const departureDate = event.target.querySelector('input[name="departure_date"]').value;const returnDate = event.target.querySelector('input[name="return_date"]').value;// 调用后端查询火车票信息的方法queryTickets(departureDate, returnDate).then((data) => {// 渲染查询结果renderResults(data);});
});async function queryTickets(departureDate, returnDate) {// 这里假设 queryTickets 方法会返回包含火车票信息的 JSON 数据return fetch('/api/tickets', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({departureDate,returnDate,}),}).then((response) => response.json());
}function renderResults(data) {// 清空查询结果results.innerHTML = '';// 遍历火车票信息并创建表格行data.forEach((ticket) => {const row = document.createElement('tr');row.innerHTML = `${ticket.trainNo}${ticket.departureTime}${ticket.arrivalTime}${ticket.duration}${ticket.price}`;// 将表格行添加到结果表中results.appendChild(row);});
}style.css
css
body {font-family: Arial, sans-serif;
}h1 {text-align: center;margin-bottom: 15px;
}form {display: flex;align-items: center;justify-content: center;gap: 15px;margin-bottom: 15px;
}label {margin-right: 5px;
}input[type="date"] {width: 150px;
}results {width: 100%;border-collapse: collapse;
}results th {text-align: center;
}results td {padding: 5px;
}
