监听下拉菜单中所选择的年份和月份,发送 AJAX 请求获取数据库中所选年份中该月份的数据并输出到php页面,请生成完整代码
时间: 2024-02-01 22:14:57 浏览: 52
jquery日期控件(有下拉菜单选择年份)
4星 · 用户满意度95%
下面是一个简单的例子,实现了监听下拉菜单选择年份和月份,并通过 AJAX 请求获取数据库中所选年份中该月份的数据并输出到 PHP 页面。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>监听下拉菜单选择年份和月份</title>
<meta charset="utf-8">
</head>
<body>
<label for="year">年份:</label>
<select id="year" name="year">
<?php
// 生成年份选项
for($i = 2021; $i >= 2000; $i--) {
echo '<option value="' . $i . '">' . $i . '</option>';
}
?>
</select>
<label for="month">月份:</label>
<select id="month" name="month">
<?php
// 生成月份选项
for($i = 1; $i <= 12; $i++) {
echo '<option value="' . $i . '">' . $i . '</option>';
}
?>
</select>
<button id="submit">查询</button>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
// 监听查询按钮点击事件
$('#submit').click(function() {
var year = $('#year').val();
var month = $('#month').val();
// 发送 AJAX 请求获取数据
$.ajax({
type: 'POST',
url: 'get_data.php',
data: {
year: year,
month: month
},
success: function(data) {
// 显示获取的数据
$('#result').html(data);
}
});
});
});
</script>
</body>
</html>
```
PHP 代码(get_data.php):
```php
<?php
// 获取提交的年份和月份
$year = $_POST['year'];
$month = $_POST['month'];
// 连接数据库
$conn = mysqli_connect('localhost', 'username', 'password', 'database');
if(!$conn) {
die('连接数据库失败:' . mysqli_connect_error());
}
// 查询指定年份和月份的数据
$sql = "SELECT * FROM table WHERE YEAR(date) = $year AND MONTH(date) = $month";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0) {
// 输出数据
while($row = mysqli_fetch_assoc($result)) {
echo $row['field1'] . ' ' . $row['field2'] . '<br>';
}
} else {
echo '没有数据';
}
// 断开数据库连接
mysqli_close($conn);
?>
```
注意事项:
- 在实际使用中,需要根据自己的数据库表和字段进行修改。
- 为了简化示例,这里使用了 jQuery 库,如果项目中没有使用 jQuery 可以使用原生 JavaScript 实现。
阅读全文