飞机订票系统js
时间: 2023-08-05 19:07:28 浏览: 96
飞机订票系统的前端通常会用到 HTML、CSS 和 JavaScript。JavaScript 可以用来处理用户输入、表单验证、与后台通信等功能。
以下是一个简单的飞机订票系统的前端代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>飞机订票系统</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎使用飞机订票系统!</h1>
<form id="booking-form">
<label for="flight-number">航班号:</label>
<input type="text" id="flight-number" name="flight-number" required>
<label for="departure-date">出发日期:</label>
<input type="date" id="departure-date" name="departure-date" required>
<label for="passenger-name">乘客姓名:</label>
<input type="text" id="passenger-name" name="passenger-name" required>
<label for="seat-type">座位类型:</label>
<select id="seat-type" name="seat-type" required>
<option value="">请选择座位类型</option>
<option value="economy">经济舱</option>
<option value="business">商务舱</option>
<option value="first-class">头等舱</option>
</select>
<button type="submit">提交</button>
</form>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
body {
font-family: Arial, sans-serif;
}
label {
display: block;
margin-bottom: 10px;
}
input, select {
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
```
JavaScript:
```javascript
const form = document.getElementById('booking-form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认提交行为
// 获取表单数据
const flightNumber = document.getElementById('flight-number').value;
const departureDate = document.getElementById('departure-date').value;
const passengerName = document.getElementById('passenger-name').value;
const seatType = document.getElementById('seat-type').value;
// 发送 POST 请求
fetch('/api/bookings', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
flightNumber,
departureDate,
passengerName,
seatType
})
})
.then(response => response.json())
.then(data => {
alert('订票成功!您的订单号为:' + data.orderNumber);
})
.catch(error => {
alert('订票失败:' + error.message);
});
});
```
以上代码仅供参考,实际开发中需要根据具体需求进行修改和完善。后端部分也需要根据具体情况进行设计和实现。