在网页生成一个名为PLeave Select Leave Type的下拉菜单,监听change事件,在用户选择后立刻根据所选子菜单查MySQL数据表
时间: 2024-02-18 19:59:39 浏览: 95
这是一个需要使用前端(HTML、CSS、JavaScript)和后端(PHP、MySQL)技术的完整项目,以下是一个大致的思路:
1. 在 HTML 页面中添加一个名为 `PLeave Select Leave Type` 的下拉菜单:
```html
<select id="leave-type">
<option value="">Please select a leave type</option>
<option value="Annual Leave">Annual Leave</option>
<option value="No Pay Leave">No Pay Leave</option>
<option value="Compensation Leave">Compensation Leave</option>
</select>
```
2. 使用 jQuery 监听 `#leave-type` 元素的 `change` 事件:
```javascript
$(document).ready(function() {
$("#leave-type").change(function() {
// 获取所选的请假类型
var leaveType = $(this).val();
// 发送 AJAX 请求到后端 PHP 文件
$.ajax({
url: "get_leave_dates.php",
method: "POST",
data: { type: leaveType },
success: function(response) {
// 处理从 PHP 文件返回的数据
// 在前端页面显示请假时间列表等相关信息
}
});
});
});
```
3. 在后端 PHP 文件 `get_leave_dates.php` 中,连接 MySQL 数据库,根据所选的请假类型查询相应的请假时间列表等信息,并将结果以 JSON 格式返回给前端:
```php
<?php
// 连接 MySQL 数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取前端发送的请假类型
$leaveType = $_POST["type"];
// 根据请假类型查询 MySQL 数据表
$sql = "SELECT * FROM leaves WHERE type='$leaveType'";
$result = $conn->query($sql);
// 将查询结果转换为 JSON 格式并返回
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
echo json_encode($data);
// 关闭 MySQL 数据库连接
$conn->close();
?>
```
4. 在前端页面的 jQuery AJAX 请求成功回调函数中,处理从 PHP 文件返回的数据,并在页面上显示请假时间列表等相关信息。
以上是一个大致的思路,具体实现过程中还需要根据实际需求进行调整和优化。
阅读全文